Question

我有多个包含单选按钮的问题（每个单选按钮都有其自己的自定义属性：数值）。

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

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

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

1 个答案: