cannot check/uncheck checkbox in javascript/jquery

Question

I have a checkbox which will toggle some other check boxes on a html form:

<input type="checkbox" name="selector" onclick="toggle_all(this);"/>

<script language="javascript">
function toggle_all(source) {
    var checkboxes = $(":input[name^='form[r']");
    if($(source).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
    alert('done');
}
</script>

First time I click the "selector" check box, all check boxes with names starting "form[r" will be checked. Then when "selector" check box is unchecked, all others are unchecked as well. Since then checking/unchecking "selector" checkbox doesn't affect other checkboxes. The code is running because alert('done') shows up. What's wrong here?

dfsq · Accepted Answer · 2013-01-30 09:35:17Z

2

I would suggest an improvement. Change HTML, add some class to all your checkboxes:

<input class="check" type="checkbox" name="form[r]">

And JS:

function toggle_all(source) {
    $(".check").prop('checked', source.checked);
}

http://jsfiddle.net/tFv3G/

And the reason why is that searching elements by its attributes much slower than by class name. And less readable as well.

answered Jan 30, 2013 at 9:35

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Adil · Accepted Answer · 2013-01-30 09:30:11Z

1

You need to escape the square bracket in selector

Change

var checkboxes = $(":input[name^='form[r']");

To

var checkboxes = $(":input[name^='form\[r']");

answered Jan 30, 2013 at 9:30

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

techfoobar Over a year ago

You need to double escape it using \\: Check this fiddle: jsfiddle.net/NAwhN

synergetic Over a year ago

I don't know why, but it works both way, whether escaped or not.

dimusic · Accepted Answer · 2013-01-30 09:34:38Z

0

I'd recomment using this code to select/deselect all checkboxes:

$('input#select-all').change(function(){
  var checked = $(this).prop('checked');
  $(":input[name^='form[r']").prop('checked', checked);
});

answered Jan 30, 2013 at 9:34

dimusic

4,1332 gold badges31 silver badges33 bronze badges

Collectives™ on Stack Overflow

cannot check/uncheck checkbox in javascript/jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related