汇总单选按钮的自定义属性并在文本框中显示

Question

我有多个包含单选按钮的问题(每个单选按钮都有自己的自定义属性: numerical value)。

​

$("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文件中，就会出现问题(这个值不能在文本框中显示)。我想知道发生了什么事。我在网上找了找，但没有找到结果。

任何建议或建议都将不胜感激。提前谢谢你

Answer 1

您可以删除html中的代码，因为您已经声明了onclick="marking()"的$("input[type='button']").click(function() {...});来处理结果计算。

代码：

​

$("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>

​

Answer 2

​

$("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>

​