Question

我目前有这个代码，用于计算选中复选框时的总值。我需要知道如何在此计算中添加单选按钮选择。我需要这样做，因为它会增加一个总数并显示它。

$(document).ready(function() {
    function recalculate() {
        var sum = 0;
        var base = 0;

        $("input[type=checkbox]:checked").each(function() {
             sum += parseInt($(this).attr("rel"));
        });

        $("#output").html(sum);
    }

    $("input[type=checkbox]").change(function() {
        recalculate();
    });

});


    <td width="236" height="25" align="left">Booking Period:</td>
</tr>
            <tr>
                <td height="10" align="right" class="align_left">One Day: ₤49 </td>
                <td>
                  <input type="radio" name="duration" id="oneday" value="One Day Rental"/>
                </td>
              </tr>

    <tr>
                <td height="30" align="right" class="align_right">Two Day: ₤69</td>
                <td>
                  <input type="radio" name="duration" id="two" value="Two Day Rental"/>
                </td>
              </tr>
    <tr>
                <td height="30" align="right" class="align_right">Weekend: ₤79</td>
                <td>
                  <input type="radio" name="duration" id="weekend" value="Weekend Rental"/>
                </td>
              </tr>

Answer 1

如果此页面上只有一个单选按钮组，您只需使用:radio[name='duration']:checked即可获得当前选中的单选按钮。

function recalculate() {
    var sum = 0;
    var base = 0;

    $("input[type=checkbox]:checked").each(function() {
         sum += parseInt($(this).attr("rel"), 10);
    });

    sum +=  parseInt($(":radio[name='duration']:checked").attr("rel"), 10);  // or some attribute that has the price
    $("#output").html(sum);
}

要触发重新计算，只需添加:radio[name='duration']选择器：

$("input[type=checkbox], :radio[name='duration']").change(function() {
    recalculate();
});

旁注，您应该将parseInt(, 10)中的基数包含在安全的一边。

<强> Example on jsfiddle

Answer 2

我认为你会以同样的方式这样做：

$("input[type=radio]:checked").each(function() {
     sum += parseInt($(this).attr("rel"));
});

和

$("input[type=radio]").change(function() {
    recalculate();
});

嗯？

jquery复选框和单选按钮

2 个答案: