在多个复选框中选中全部或取消选中全部

Check all or uncheck all in multi checkbox

本文关键字：全部 取消 复选框      更新时间：2023-09-26

我有这个代码的多复选框

HTML: 

<fieldset data-role="collapsible">
    <legend>Pick one</legend>
    <div data-role="controlgroup" id="ZIBI" align="right" >
    </div>
</fieldset>
jQuery/JavaScript: 

myArray1 = new Array(
           "1","2","3","4","5","6"
           );
 $("#ZIBI").html('');
           for (var i = 0; i < myArray1.length; i++) {
               row = myArray1[i];
               $("#ZIBI").append(
                   '<label for=' + row + '>' + row + '</label>' +
                   '<input type="checkbox" name="favcolor" id=' + row + ' value=' + row + '>');
           }
           $('#ZIBI').trigger('create');

如何通过按任意按钮来选中所有或取消选中所有?

谢谢

在这个JsFiddle中，您将找到一个方法来选中/取消选中给定div中的所有复选框，使用id为_main:

的复选框
function checkAll(e){
    e = e || event;
    var from = e.target || e.srcElement
       ,cbs = this.querySelectorAll('input'), i=1;
    if (/^_main$/i.test(from.id)){
        for (;i<cbs.length;i+=1){
            cbs[i].checked = from.checked; 
        }
    } else {
      var main = document.querySelector('#_main')
         ,j = cbs.length;    
      for (;i<cbs.length;i+=1){
          j -= cbs[i].checked ? 0 : 1;
      }
      main.checked = j === cbs.length ? true : false;
    }
}

更新

新元素应添加到$(".selector").controlgroup("container")中，而不是直接添加到$(".selector")中。如果你将它们添加到主div中，元素将不会被样式化为_controlgroup '。

您需要刷新 .checkboxradio("refresh")复选框或单选来应用jQM样式。另一点，.trigger("create")在jQM 1.4中被弃用，取而代之的是.enhanceWithin()。

myArray1 = new Array(
    "1", "2", "3", "4", "5", "6");
/* remove previous elements */
$("#ZIBI").controlgroup("container").html('');
for (var i = 0; i < myArray1.length; i++) {
    row = myArray1[i];
    /* add new ones to container */
    $("#ZIBI").controlgroup("container").append(
        '<label for=' + row + '>' + row + '</label>' +
        '<input type="checkbox" name="favcolor" id=' + row + ' value=' + row + '>');
}
/* refresh controlgroup and enhance elements within */
$("#ZIBI").controlgroup().enhanceWithin();
/* check/uncheck on button click */
$("#foo").on("click", function () {
    var status = $("#ZIBI [type=checkbox]").eq(0).prop("checked") ? false : true;
    $("#ZIBI [type=checkbox]").prop("checked", status).checkboxradio("refresh");
});

你可以试试:

HTML: 

<fieldset data-role="collapsible">
    <legend>Pick one</legend>
    <div data-role="controlgroup" id="ZIBI" align="right" >
    </div>
</fieldset>
<input type="checkbox" id="all" value="Toggle" />
jQuery: 

$('#all').on('click', function() {
    if(this.checked) {
        $('#ZIBI').find('input[type=checkbox]').prop('checked', true); 
    } else {
        $('#ZIBI').find('input[type=checkbox]').prop('checked', false); 
    }
});

工作小提琴。

相关文章：