jquery - 使用 jQuery 修改下拉框和单选按钮

Question

我有一个很长的页面，可以提出问题并在底部给出总分。

如果我在文本字段中输入数字，它们可以很好地添加到总计中，但我有一些单选按钮和下拉框在选择时不起作用(即它们不符合总计)

脚本:

    $(document).ready(function(){
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {
            $(this).keyup(function(){
                calculateSum();
            });
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
        });
        //.toFixed() method will roundoff the final sum to 0 decimal places
        $("#sum").html(sum.toFixed(0));
    }

HTML:

        <p>Select weight:<br />
          Underweight (-1 point)<input class="txt" type="radio" name="weight" value="-1" /><br />
          Normal weight (+1 point)<input class="txt" type="radio" name="weight" value="+1" checked="checked" /><br />
          Underweigth (-1 point)<input class="txt" type="radio" name="weight" value="-1" />
        </p>

        <p>Select vision impairment: 
          <select id="heath-status">
            <option class="txt" value="1">Normal and healthy (+1)</option>
            <option class="txt" value="-1">Mild impairment (-1)</option>
            <option class="txt" value="-2">Moderate impairment (-2)</option>
            <option class="txt" value="-3">Moderate/Severe impairment (-3)</option>
            <option class="txt" value="-4">Severe impairment (-4)</option>
            <option class="txt" value="-5">Severe/Extreme impairment (-5)</option>
            <option class="txt" value="-6">Extreme impairment (-6)</option>
          </select>
          </p>
        <p>Enter number of limbs you have (1 point for each limb): <input class="txt" type="text"/></p>

        <p>Enter number of days per week you exercise (1 point for each day): <input class="txt" type="text"/></p>

        <p>Grand total health score: <span id="sum">0</span></p>

半工作示例:http://jsfiddle.net/hMgpM/

Answer 1

http://jsfiddle.net/hMgpM/7/

这里有很多事情。您不希望每个人都上课 <option>而是 select 。您正在对所有选项进行求和，而不仅仅是选定的选项。同样，单选按钮需要以不同的方式处理，以便仅对选定的按钮进行求和。

此外，您不仅需要在键入时进行求和，还需要在选择单选按钮或更改选择框的值时进行求和。您还可以通过删除包装函数来清理它，因为您可以直接传递该函数。另外，each是不需要的。当调用类似keyup之类的电话时，它将绑定(bind)到 jquery 对象中的所有元素，因此无需循环。

<p>Select weight:<br />
    Underweight (-1 point)<input class="rad" type="radio" name="weight" value="-1" /><br />
    Normal weight (+1 point)<input class="rad" type="radio" name="weight" value="+1" checked="checked" /><br />
    Underweigth (-1 point)<input class="rad" type="radio" name="weight" value="-1" />
</p>

<p>Select vision impairment: 
    <select id="heath-status" class="txt">
        <option  value="1">Normal and healthy (+1)</option>
        <option  value="-1">Mild impairment (-1)</option>
        <option  value="-2">Moderate impairment (-2)</option>
        <option  value="-3">Moderate/Severe impairment (-3)</option>
        <option  value="-4">Severe impairment (-4)</option>
        <option  value="-5">Severe/Extreme impairment (-5)</option>
        <option  value="-6">Extreme impairment (-6)</option>
    </select>
</p>
<p>Enter number of limbs you have (1 point for each limb): <input class="txt" type="text"/></p>

<p>Enter number of days per week you exercise (1 point for each day): <input class="txt" type="text"/></p>

<p>Grand total health score: <span id="sum">0</span></p>

<小时/>

$(document).ready(function() {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $("input.txt").keyup(calculateSum);
    $("select.txt").change(calculateSum);
    $(".rad").click(calculateSum);

    calculateSum();
});

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });

    $(".rad:checked").each(function() {
        sum += parseFloat(this.value);
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}