获取多个复选框的值并显示在单独的输入文本字段中

Question

        <input type="checkbox" id="bulb1" name="bulb" value="1" />
        <label for="bulb1" class="fontawesome-lightbulb"></label>
        <input type="checkbox" id="bulb2" name="bulb" value="1" />
        <label for="bulb2" class="fontawesome-lightbulb"></label>
        <input type="checkbox" id="bulb3" name="bulb" value="1" />
        <label for="bulb3" class="fontawesome-lightbulb"></label>
        <input type="checkbox" id="bulb4" name="bulb" value="1" />
        <label for="bulb4" class="fontawesome-lightbulb"></label>

想法是在点击灯泡时显示二进制值。

    if (jQuery('input#bulb1').is(':checked')) { var1=1; } else { var1=0 };

    if (jQuery('input#bulb2').is(':checked')) { var2=1; } else { var2=0 };
    if (jQuery('input#bulb3').is(':checked')) { var3=1; } else { var3=0 };
    if (jQuery('input#bulb4').is(':checked')) { var4=1; } else { var4=0 };

JSFiddle：http://jsfiddle.net/A_Manojkumar/s9gJX/

对此有好的方法吗？

Answer 1

您可以使用length属性;

var var1 = jQuery('input#bulb1:checked').length;
var var2 = jQuery('input#bulb2:checked').length;
var var3 = jQuery('input#bulb3:checked').length;
var var4 = jQuery('input#bulb4:checked').length;

修改

单击灯泡时，值1将被推入输入字段#binary。如果不是，则应保留0。同样适用于所有灯泡

$(':checkbox').change(function () {
    var var1 = $('input#bulb1:checked').length.toString(10);
    var var2 = $('input#bulb2:checked').length.toString(10);
    var var3 = $('input#bulb3:checked').length.toString(10);
    var var4 = $('input#bulb4:checked').length.toString(10);
    $('#binary').val(var1 + var2 + var3 + var4);
})

DEMO