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之类的东西时，它将绑定到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));
}

Answer 2

你可以尝试

$(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
    $("input.txt:checked, select .txt:selected, input.txt:not(:radio)").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseInt(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}

基本上你没有为总和选择正确的字段。

在这里小提琴：http://jsfiddle.net/hMgpM/1/

EDIt - 为了让事情更好，你也应该做

        $(this).bind("click keyup", function(){
            calculateSum();
        });

而不是

        $(this).keyup(function(){
            calculateSum();
        });

在此处http://jsfiddle.net/hMgpM/3/

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

2 个答案: