如何在 jQuery 中创建多个复选框处理程序？答案

【问题标题】：How to create multiple checkbox handlers in jQuery?如何在 jQuery 中创建多个复选框处理程序？
【发布时间】：2013-07-03 06:48:42
【问题描述】：

我有这两个复选框：

<form action="">
    <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

每个复选框的事件：

jQuery(function () {
$("#carCheckbox").click(function () {
    if($("#carCheckbox").is(":checked")) {
        alert("it works");
    }
})
});

jQuery(function () {
$("#carCheckbox").click(function () {
    if($("#bikeCheckbox").is(":checked")) {
        alert("it works");
    }
})
});

现在我想做的是创建一个for 或某种循环来为多个复选框创建事件处理程序。到目前为止，我被困在这段代码中：

jQuery(function () {
var infoArray = ["car", "bike"];

for(var i = 0; i < infoArray.length; i++) {
    var id = "#" + infoArray[i] + "Checkbox";

    $(id).click(function () {
        var myCheckbox = "#" + infoArray[i] + "Checkbox;
        if($(myCheckbox).is(":checked")) {
            alert("it works");
        }
    })
}
});

非常感谢任何帮助。

【问题讨论】：

使用这个堆栈溢出问题stackoverflow.com/questions/11945802/…
它们是否需要分别为每个函数？因为如果每个复选框都调用相同的函数，那么您就过于复杂了。你能更详细地解释一下你想要什么吗？
我实际上在代码中有 35 个复选框，我正在寻找一种方法来减少重复代码的数量。这种想法有缺陷吗？
这完全取决于您要做什么：每次都是相同的功能，还是不同的功能？

标签： javascript jquery

【解决方案1】：

<form action="">
    <input id="bikeCheckbox" class="mybox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="mybox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

$('#save_value').click(function(){
$('.mybox:checked').each(function(){
     alert($(this).val());
}); });

您尝试添加永远相同的类名复选框并使用了

【讨论】：

【解决方案2】：

您不需要创建一个数组来保存所有这些值并循环它们。而且您绝对不需要为每个复选框设置一个函数！

为您要检查的复选框添加一个类，例如：

<form action="">
    <input id="bikeCheckbox" class="mycheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="mycheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>

然后你可以很容易地像这样循环：

jQuery(function () {
    // Whenever any of these checkboxes is clicked
    $("input.mycheckbox").click(function () {
        // Loop all these checkboxes which are checked
        $("input.mycheckbox:checked").each(function(){
            alert("it works");
            // Use $(this).val() to get the Bike, Car etc.. value
        });
    })
});

【讨论】：

【解决方案3】：

使用JQuery的each函数

jQuery(function () {
    $(":checkbox").click(function () {
         $(':checkbox:checked').each(function(i){
            alert("it works");
          });
     });
}

【讨论】：

【解决方案4】：

如果你想通过一些分组来做到这一点，比如你只想在一个组中的某些复选框中看到，你可以使用下面这样的类名

<form action="">
    <input id="bikeCheckbox" class="myCheckBoxGroup" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br>
    <input id="carCheckbox" class="myCheckBoxGroup" type="checkbox" name="carCheckbox" value="Car">I have a car
</form>
jQuery(function () {
    $(".myCheckBoxGroup").click(function () {
        $(".myCheckBoxGroup").each(function(){
            if($(this).is(":checked")) {
                alert("this is checked");
            }
        });
    })
});

【讨论】：

【解决方案5】：

试试这个。

<input id="chk_bikeCheckbox"  type="checkbox" onclick='UpdateIdinHF(this);' name="bikeCheckbox" value="Bike">
<input id="chk_carCheckbox" class="mycheckbox" onclick='UpdateIdinHF(this);' type="checkbox" name="carCheckbox" value="Car">






 function UpdateIdinHF(obj) {
        var id = $(obj).attr('id');
        var name = $(obj).attr('name');
        var value = parseInt($(obj).attr('value'));
        var IsChecked = $(obj).is(':checked');

            $('input[id*="chk_' + name + '"]').each(function () {
                if (parseInt($(this).val()) != 0) {
                    if (IsChecked == true) {
                        $(this).attr('checked', 'checked');

                    }
                    else {
                        $(this).removeAttr('checked');

                    }
                }
            });

    }

【讨论】：

【解决方案6】：

你在寻找这样的东西吗？

function bindSomeCheckboxes() {
    var score=0;
    var checkboxes = {
        "id_1" : 3,
        "id_2" : 1,
        "id_3" : 2,
        "id_4" : 5
    };

var arrayOfIds = []; // to store array of ids

$.each(checkboxes,function(key, val) {  // populate array with ids
    arrayOfIds.push( key );
});

   // create a selector of the IDs
$( "#" + arrayOfIds.join(',#') ).change(function() {
      // alert the score
    alert( checkboxes[ this.id ] );
    if ( this.checked ) {
        //do something when it is checked
    } else {
        //do something else
    }
});

}

【讨论】：

【解决方案7】：

你也可以试试这个

<script TYPE="text/javascript">
     jQuery(function () {
       var infoArray = ["car", "bike"];

       for(var i = 0; i < infoArray.length; i++) {
            var id = "#"+infoArray[i]+"Checkbox";
            $(id).click(function () {
               if($(id).is(":checked")) {
                 alert("it works");
               }
            })
       }
     });
</script>

【讨论】：

【解决方案8】：

您不需要定义类。使用下面的sn-p直接访问你点击的复选框。

$(document).on("click", "input[type='checkbox']", function (e) {
     console.log(e.target);
});

【讨论】：