Question

我有这两个复选框：

<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");
        }
    })
}
});

非常感谢任何帮助。

Answer 1

您无需创建数组来保存所有这些值并循环这些值。而且你绝对不需要每个复选框的功能！

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

<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
        });
    })
});

Answer 2

<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());
}); });

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

Answer 3

使用JQuery的each函数

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

Answer 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");
            }
        });
    })
});

Answer 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');

                    }
                }
            });

    }

Answer 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
    }
});

}

Answer 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>

Answer 8

您不需要定义类。使用以下代码片段直接访问您单击的复选框。

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

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

8 个答案: