Question

我有多个复选框的代码

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

如何通过按任意按钮检查全部或取消全部选中？

感谢

Answer 1

在此JsFiddle中，您会找到一种方法，使用ID为_main的复选框选中/取消选中给定div中的所有复选框：

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

Answer 2

你可以试试这个：

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

工作Fiddle。

Answer 3

更新

新元素应直接添加到$(".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");
});

<强> Demo

选中全部或取消选中所有多重复选框

3 个答案:

更新