CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Legend1989
Legend1989

Reputation: 664

Select all checkboxes on click of radio button

I have worked out how on clicking the radio button how to check a checkbox on my page, however this selects on the ID of the checkbox. The checkboxes on my page a dynamically generated with an id number on the end. 

<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom selector"> 
Option One<br />

<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom selector"> 
Option Two<br />

<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom selector"> 
Option Three<br />

<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom selector"> 
Option Four<br />

<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom selector"> 
Option Five<br />   

<input type="radio" id="op5" value="1" name="options2" class="custom">
Select All

As you can see the IDs are gridcb0 to gridcb5 however the number on the end could go on in the hundreds.

Here my JS

jQuery('#op5').click(function(){      
    jQuery('#gridcb0').attr('checked', true);   
});

At the moment this will only select the top checkbox, how can change this JS so I cycle through and check all the required checkboxes?

Upvotes: 1

Views: 2680

Answers (9)

N K
N K

Reputation: 3327

jQuery('#op5').click(function(){
    jQuery('.selector').prop('checked', true);
 });
jQuery('.selector').change(function(){
     jQuery('#op5').prop('checked',
        jQuery('.selector:checked').length == jQuery('.selector').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom selector"> Option One
    <br />
<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom selector"> Option Two
        <br />
<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom selector"> Option Three
        <br />
<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom selector"> Option Four
        <br />
<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom selector"> Option Five    
    <br />    
<input type="radio" id="op5" value="1" name="options2" class="custom">Select All

Upvotes: 1

Sukanya1991
Sukanya1991

Reputation: 776

The following code works fine.

<script src="~/Scripts/jquery-1.8.2.js"></script>
<input type="checkbox" certificate="false" id="gridcb0" siteid="23445" value="72278" class="custom-selector"> Option One
<br />
<input type="checkbox" certificate="false" id="gridcb1" siteid="23445" value="72278" class="custom-selector"> Option Two
<br />
<input type="checkbox" certificate="false" id="gridcb2" siteid="23445" value="72278" class="custom-selector"> Option Three
<br />
<input type="checkbox" certificate="false" id="gridcb3" siteid="23445" value="72278" class="custom-selector"> Option Four
<br />
<input type="checkbox" certificate="false" id="gridcb4" siteid="23445" value="72278" class="custom-selector"> Option Five
<br />
<input type="radio" id="op5" value="1" name="options2" class="custom">Select All

<script>
    $(document).ready(function () {
        $(".custom").change(function () {
               $(".custom").parent().find(".custom-selector").prop("checked", true);
        })
    });

</script>

I just changed your checkboxes' class to

custom-selector

Upvotes: 2

krishna
krishna

Reputation: 146

You can do like below.

jQuery('#op5').click(function(){      
jQuery('input[type="checkbox"]').prop('checked', true);});

Upvotes: 2

Asit
Asit

Reputation: 468

Use this jQuery code :

jQuery('#op5').click(function(){      
    $(".custom").attr("checked","checked");
 });

Upvotes: 2

Mithrandir
Mithrandir

Reputation: 25347

If you change your code to

jQuery('#op5').click(function(){      
    jQuery(':checkbox').attr('checked', true);   
 });

it should do the trick. 

 jQuery(':checkbox')

is just a shorthand for

 jQuery('input[type=checkbox]')

Upvotes: 1

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You need to use either a class that you apply to all checkboxes or you can target them by element, like:

jQuery('#op5').click(function(){      
    jQuery('input[type=checkbox]').attr('checked', true);   
 });

JSFIDDLE http://jsfiddle.net/a_incarnati/ckr7r0fm/1/

Upvotes: 1

The F
The F

Reputation: 3714

You can try

jQuery('#op5').click(function(){      
    jQuery('input[type="checkbox"]').attr('checked', true);   
});

To have more control, you could wrap your checkboxes in a seperate div.

Upvotes: 1

jogesh_pi
jogesh_pi

Reputation: 9782

You can try by select element with type like the below code: 

jQuery('#op5').click(function(){      
    jQuery('input[type="checkbox"]').prop('checked', true);   
 });

Helpful: .prop()

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337580

They all share a common class, so you could select by that and negate the need to cycle through them:

jQuery('#op5').click(function(){      
    jQuery('.custom.selector').attr('checked', true);   
});

You could even add another more semantic class to use as the selector for this purpose.

Upvotes: 2

Related Questions