Суммируйте пользовательские атрибуты переключателей и отобразите их в текстовом поле. - PullRequest
Новая
       41

Суммируйте пользовательские атрибуты переключателей и отобразите их в текстовом поле.

0 голосов
/ 27 февраля 2019

У меня есть несколько вопросов, которые содержат переключатели (каждый переключатель имеет свой собственный атрибут: числовое значение).

$("input[type='button']").click(function() {
  function marking() {
    let q1 = $("input[name='age']:checked").attr('data-mark');
    let q2 = $("input[name='race']:checked").attr('data-mark');
    var total = parseInt(q1) + parseInt(q2);
    document.getElementById('result').value = total;
  }
  marking();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <font size="4">What is your age?</font><br>
  <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
  <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
  <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
  <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
  <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
  <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
  <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>
<li>
  <font size="4">Please specify your race</font><br>
  <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
  <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
  <input type="radio" name="race" id="M" data-mark='1' value="M">
  <label for="M"><font size="4">Malay</font></label><br>
  <input type="radio" name="race" id="I" data-mark='2' value="I">
  <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="race" id="O" data-mark='5' value="O">
  <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value" onclick="marking()">
<input type="text" id="result" name="result" value="" readonly>

Этот код может выполняться без проблем, если его поместить во вновь созданный файл php.Но запустить с проблемой (это значение не может отображаться в текстовом поле), если положить в мой созданный файл php.Интересно, что происходит?Я ищу в интернете, но ничего не найдено.
Любой совет или предложение будут оценены.Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019 

$("input[type='button']").click(function() {
    marking();
});

function marking() {
    let q1 = $("input[name='age']:checked").attr('data-mark');
    let q2 = $("input[name='race']:checked").attr('data-mark');
    var total = parseInt(q1) + parseInt(q2);

    document.getElementById('result').value = total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
    <font size="4">What is your age?</font><br>
    <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
    <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
    <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
    <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
    <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
    <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
    <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
    <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>

<li>
    <font size="4">Please specify your race</font><br>
    <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
    <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
    <input type="radio" name="race" id="M" data-mark='1' value="M">
    <label for="M"><font size="4">Malay</font></label><br>
    <input type="radio" name="race" id="I" data-mark='2' value="I">
    <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
    <input type="radio" name="race" id="O" data-mark='5' value="O">
    <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value" onclick="marking()">
<input type="text" id="result" name="result" value="" readonly>
0 голосов
/ 27 февраля 2019

Вы можете удалить код в html onclick="marking()", потому что вы уже объявили $("input[type='button']").click(function() {...}); jQuery для обработки результатов расчета.

Код: 

$("input[type='button']").click(function() {
  const q1 = +$("input[name='age']:checked").attr('data-mark');
  const q2 = +$("input[name='race']:checked").attr('data-mark');
  document.getElementById('result').value = q1 + q2;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <font size="4">What is your age?</font><br>
  <input type="radio" name="age" id="14" data-mark='1' value="14" checked="checked">
  <label for="14"><font size="4">Under 14 years old</font></label> &ensp;&ensp;
  <input type="radio" name="age" id="15 - 24" data-mark='2' value="15 - 24">
  <label for="15 - 24"><font size="4">15 - 24 years old</font></label><br>
  <input type="radio" name="age" id="25 - 59" data-mark='4' value="25 - 59">
  <label for="25 - 59"><font size="4">25 - 59 years old</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="age" id="60 - 74" data-mark='2' value="60 - 74">
  <label for="60 - 74"><font size="4">60 - 74 years old</font></label><br><br></li>

<li>
  <font size="4">Please specify your race</font><br>
  <input type="radio" name="race" id="C" data-mark='4' value="C" checked="checked">
  <label for="C"><font size="4">Chinese</font></label> &ensp;&ensp;
  <input type="radio" name="race" id="M" data-mark='1' value="M">
  <label for="M"><font size="4">Malay</font></label><br>
  <input type="radio" name="race" id="I" data-mark='2' value="I">
  <label for="I"><font size="4">Indian</font></label> &ensp;&ensp;&ensp;&ensp;
  <input type="radio" name="race" id="O" data-mark='5' value="O">
  <label for="O"><font size="4">Others</font></label><br><br></li>

<input type="button" name="button" value="Get Value">
<input type="text" id="result" name="result" value="" readonly>
...