Check all or uncheck all in multi checkbox

Question

I have this code for multi check-box

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

how to check all or uncheck all by pressing any button ?

thanks

Answer 1

In this JsFiddle you'll find a method to check/uncheck all checkboxes within a given div, using a checkbox with 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;
    }
}

Answer 2

You can try this:

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

Working Fiddle .

Answer 3

Update

New elements should be added to $(".selector").controlgroup("container") not $(".selector") directly. If you add them to main div, elements won't be styled as a _controlgroup`.

---

You need to refresh .checkboxradio("refresh") checkbox or radio to apply jQM styles. Another point, .trigger("create") is deprecated as of jQM 1.4 and replaced with .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