Select All Checkboxes On Click using Jquery

Question

I have following HTML:

<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 1</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 2</label>
<label><input type="checkbox" value="12" name="Cevent[]" /> Yoga 3</label>
<label><input type="checkbox" id="selectAllEventList" name="selectAllE"> Select All</label>

and Following Jquery:

$(document).ready(function (){

   $('#selectAllEventList').click (function () {
          $('input[name=Cevent[]]').each(function(){
          $(this).prop('checked', status);
          });

     });
 });

But i am getting Syntax error:

Error: Syntax error, unrecognized expression: [name=Cevent[]]

I think i am writing wrong Selector at input[name=Cevent[]] what is the problem how can i write it correctly because i must have to send it as a array so i have to write it as Cevent[].

James Allardice · Accepted Answer · 2012-08-10 10:07:52Z

2

Quote the attribute value:

$('input[name="Cevent[]"]')

Update

I assume that your code is meant to check/uncheck all the Cevent[] checkboxes when the selectAllE checkbox is changed. If that's the case, you can shorten your code significantly, because most jQuery methods apply to every element in the matched set (there's no need to use .each()):

$(document).ready(function () {
    $('#selectAllEventList').click(function () {
        $('input[name="Cevent[]"]').prop('checked', this.checked);
    });
});

edited Aug 10, 2012 at 10:07

answered Aug 10, 2012 at 9:52

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Seeker Over a year ago

not working :-( can you please provide the working example on jsfiddle?

James Allardice Over a year ago

@PhpSeeker - jsfiddle.net/fA3W2/1 - I've added the declaration of status, which you didn't show in your question... that may have been the problem?

James Allardice Over a year ago

@PhpSeeker - And, assuming my previous fiddle demonstrated the correct behaviour, here's a much shorter version of your code: jsfiddle.net/fA3W2/2

Adil · Accepted Answer · 2012-08-10 09:58:12Z

0

You can use \ to escape [,

Live Demo

$(document).ready(function (){

   $('#selectAllEventList').click (function () {
          $('input[name*=Cevent\\[]').each(function(){
              if( $('#selectAllEventList').is(':checked'))
                   $(this).prop('checked',true);
              else
                   $(this).prop('checked',false);
          });

     });
 });

edited Aug 10, 2012 at 9:58

answered Aug 10, 2012 at 9:52

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

Seeker Over a year ago

not working :-( can you please provide the working example on jsfiddle?

Adil Over a year ago

It is on jsfiddle now, please have a look

gaurang171 · Accepted Answer · 2012-08-10 10:02:02Z

0

Please try this

see Demo

JS

$('#selectAllEventList').click (function () {
          $('.chkbox').each(function(){
          $(this).prop('checked', true);
          });

     });

HTML

<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 1</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 2</label>
<label><input type="checkbox" class="chkbox" value="12" name="Cevent[]" /> Yoga 3</label>
<label><input type="checkbox" id="selectAllEventList" name="selectAllE"> Select All</label>

answered Aug 10, 2012 at 10:02

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

Select All Checkboxes On Click using Jquery

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related