JQuery Checked and Unchecked status to checked all or none

From CoderLearner
Jump to: navigation, search

Description

You want to check the check box to check all the checkbox element or unchecked all the checkbox. In this case, the check box status is changing based on the check box that user check. If user check a checkbox "for select all" then the other checkbox unchecked and it called "unchecked all".

Example

  • Checkbox status for checked all or none
<input type="checkbox" class="myibreaker2"  name="checked" id="checked_all">
<label for="checked_all">Check All</label>

<input type="checkbox" class="myibreaker2" name="checked" id="unchecked_all">
<label for="unchecked_all">Uncheck All</label>


  • All the elements to be checked or unchecked
<input type="checkbox" class="myibreaker" name="course[]" value="49" id="id49">
<label for="id49" title="FY14-Credit Card Data Security">SF1409</label>

<input type="checkbox" class="myibreaker" name="course[]" value="72" id="id72">
<label for="id72" title="FY14 P Card Cardholder">SF1402</label>

<input type="checkbox" class="myibreaker" name="course[]" value="71" id="id71">
<label for="id71" title="TAP Test">AW1400</label>

<input type="checkbox" class="myibreaker" name="course[]" value="51" id="id51">
<label for="id51" title="FY14-UHV Cash Handling">VF1401</label>

<input type="checkbox" class="myibreaker" name="course[]" value="52" id="id52">
<label for="id52" title="Asset Mngmnt: Business Manager">HF1408</label>

<input type="checkbox" class="myibreaker" name="course[]" value="53" id="id53">
<label for="id53" title="FY14 HR View">HH1401</label>

<input type="checkbox" class="myibreaker" name="course[]" value="54" id="id54">
<label for="id54" title="FY14 Voucher Creation">HF1401</label>

<input type="checkbox" class="myibreaker" name="course[]" value="55" id="id55">
<label for="id55" title="P Cardholder Recertification">DF1402</label>

  • JavaScript/JQuery
  // check and unchecked
    $('input#checked_all').click(function() {
        $('input#unchecked_all').prop('checked', false);
        $('input.myibreaker').each(function() {
            $(this).attr('checked', true);
        });
    });
    $('input#unchecked_all').click(function() {
        $('input#checked_all').prop('checked', false); //

        $('input.myibreaker').each(function() {
            $(this).attr('checked', false);
        });
    });