1

我有这两个复选框：

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

任何帮助是极大的赞赏。

4

8 回答 8

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

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

于 2013-07-03T06:58:53.623 回答
5

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

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

<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
        });
    })
});
于 2013-07-03T06:53:45.230 回答
1

使用 JQuery 的each函数

jQuery(function () {
    $(":checkbox").click(function () {
         $(':checkbox:checked').each(function(i){
            alert("it works");
          });
     });
}
于 2013-07-03T06:55:08.543 回答
1

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

<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");
            }
        });
    })
});
于 2013-07-03T06:56:52.440 回答
1

试试这个。

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

                    }
                }
            });

    }
于 2013-07-03T06:56:58.003 回答
1

你在找这样的东西吗？

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

}

于 2013-07-03T06:58:23.493 回答
1

你也可以试试这个

<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>
于 2013-07-03T07:01:18.660 回答
1

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

$(document).on("click", "input[type='checkbox']", function (e) {
     console.log(e.target);
});
于 2019-10-31T15:05:26.850 回答