how to selectunselect the checkboxes using javascriptjquery - Stack Overflow

admin管理员组

文章数量:1393318

I have the following html code

html code

<p><a href="" onclick="select()">Select All</a>&nbsp; / &nbsp;<a href="" onclick="unselect()" >Unselect All</a> </p>

{% for field in fields %}
  <div class="contact_align">    
    <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }}
  </div>
{% endfor %}

<script type="text/javascript">
    function select(){
                $('#select-unselect').attr('checked',true);
            }
    function unselect(){
                $('#select-unselect').attr('checked',false);
            }               
</script>

so above is my code, and the functionality is not working , so can anyone please let me know what i am doing wrong in the above code and make it work ?

I have the following html code

html code

<p><a href="" onclick="select()">Select All</a>&nbsp; / &nbsp;<a href="" onclick="unselect()" >Unselect All</a> </p>

{% for field in fields %}
  <div class="contact_align">    
    <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }}
  </div>
{% endfor %}

<script type="text/javascript">
    function select(){
                $('#select-unselect').attr('checked',true);
            }
    function unselect(){
                $('#select-unselect').attr('checked',false);
            }               
</script>

so above is my code, and the functionality is not working , so can anyone please let me know what i am doing wrong in the above code and make it work ?

• javascript
• jquery
• django
• checkbox
• jquery-selectors

Share Improve this question Follow edited Aug 22, 2013 at 12:26 Bridge 30.8k1010 gold badges6464 silver badges8585 bronze badges asked Aug 22, 2013 at 8:12 Shiva Krishna BavandlaShiva Krishna Bavandla 26.8k7777 gold badges198198 silver badges315315 bronze badges 1

• It looks like you are creating the checkboxes in a loop with an ID. That id needs to be unique. – putvande Commented Aug 22, 2013 at 8:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You need to add a return false in your functions. Otherwise the a tags are just behaving as normal a tags and thus going to the href specified. And change the attr(...) for prop(...).

function select(){
    $('#select-unselect').prop('checked',true);
    return false;
}

function unselect(){
    $('#select-unselect').prop('checked',false);
    return false;
}

Or toggle it in one function like this:

function select(){
    $('#select-unselect').prop('checked',function(id,checked){ return !checked; });
    return false;
}

But I would remend changing the id #select-unselect to a class .select-unselect because you can't have duplicate ids.

Also change <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }} to <input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

use .prop(), also since you have multiple elements with the same id use class instead of id

<input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

Then

$('.select-unselect').prop('checked',true);

Use Prop instead of attr. Please see this link Jquery Attr to see the difference between attr and prop.
$('#select-unselect').prop('checked',true);

And try to use class instead of id of a control.

本文标签： how to selectunselect the checkboxes using javascriptjqueryStack Overflow