Check box with jQuery

Question

Here is the jsfiddle http://jsfiddle.net/6mk7m/9/

I have found out on stackoverflow that I need to make jsfiddle account so I can show you guys the code for easy reading, ( sorry guys ) if my English is a not so good,

I am currently learning jQuery, I am not an expert, just a " beginner " ,anyway,

I have made a checkbox and I gave it an id = all

<input type="checkbox" id="all" /><span style='color:red'>All</span>

Simply what I want is, when I click on this checkbox with this specific id = all I want to check these 3 checkboxes listed below

<input type="checkbox" name="us[]" value="google" />Google
<input type="checkbox" name="us[]" value="youtube" />Youtube
<input type="checkbox" name="us[]" value="friend" />Friend<br/><br/>

so this is the code that I some how figured out,

<script type="text/javascript">

$("document").ready(function() {


    $("input[id='all']").bind('click',function(){

        var all = $(this);

        console.log('status: ' + all.prop('checked'));


        if(all.prop('checked') == true)
        {
            //alert('now its true');
            $("input:checkbox").attr("checked","checked");
        }
        else if (all.prop('checked') == false){
            $("input:checkbox").removeAttr("checked");
        }

    })
})  
 </script>

when i click on the checkbox with id = all ( it selects all checkboxes )

now when I click the second time on the checkbox with id = all ( it unchecked all checkboxes )

every thing is greet untill now

Now the problem when I go to click a third time on the checkbox with id = all

( it does not check any checkboxes ) However when I check the console I see all attributes equal to checked - but the checkboxes I don't see them checked on the browser I mean the checkboxes they don't have this tick mark in the middle of each box, maybe there is something wrong with code, I just can't figure it out why it's not working when I want to click more than 3 times.

Do not use `attr`, use `prop`. To check, call `$('input:checkbox').prop('checked', true);`, to uncheck, change `true` to `false` — Anton Guryanov, Apr 20 '13 at 12:46
Corrected your jsFiddle; you forgot to include jQuery in the external resources. — Dogoferis, Apr 20 '13 at 12:47
@user2237771, I corrected my comment. I'm sorry, but I was wrong the first time. — Anton Guryanov, Apr 20 '13 at 12:49

score 2 · Accepted Answer · answered Apr 20 '13 at 12:50

2

Here is a jsFiddle with the correct behavior. As of the most recent versions of jQuery the command prop() should be used to alter properties of an element (as opposed to attributes).

http://jsfiddle.net/6mk7m/10/

See the code below:

    if(all.prop('checked') == true)
    {
        //alert('now its true');
        $("input:checkbox").prop("checked",true);
    }
    else if (all.prop('checked') == false){
        $("input:checkbox").prop("checked",false);
    }

answered Apr 20 '13 at 12:50

Dogoferis

628
7
23

thanks man for the help, but i just want to know why the attr method dose not work...? until i use the .prop method – Mohammed Allam Apr 20 '13 at 13:16
Rather than give my own explanation; consider giving this question and answer a read over if you are curious http://stackoverflow.com/questions/13247058/jquery-attr-vs-prop – Dogoferis Apr 20 '13 at 13:26

kayz1 · Answer 2 · 2013-04-20T13:05:21.840

2

$('#all').on('click', function(){
    $('input:checkbox[name="us[]"]').prop('checked', this.checked);
});

edited Apr 20 '13 at 13:05

answered Apr 20 '13 at 12:57

kayz1

7,260
3
53
56

score 2 · Answer 3 · answered Sep 04 '14 at 10:18

$(document).ready(function() {
    $('#selecctall').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });
});

Welcome to SO! It would be great if you add a bit of explanation to your code, especially the key things used in it and how they help solve the problem. — Rachcha, Sep 04 '14 at 10:21

score 0 · Answer 4 · answered Apr 20 '13 at 12:48

0

Try this way-

Working Fiddle

$("input[id='all']").bind('click',function(){
        var all = $(this);
        console.log('status: ' + all.prop('checked'));
        if(all.is(':checked')){
            //alert('now its true');
            $("input:checkbox[name^='us']").prop("checked",true);
        }
        else{
            $("input:checkbox[name^='us']").prop("checked",false);
        }
});

answered Apr 20 '13 at 12:48

Adil Shaikh

44,509
17
89
111

yes, i saw that mohammed , but on my firefox browser it dose not work, but the console shows the attributes are having the vale of checked – Mohammed Allam Apr 20 '13 at 13:05
thanks Mohammed for you help, but there is somebody else just before you solve it out, so i had to mark his answer, the correct one, i really appreciated your help, thank you one more time..... – Mohammed Allam Apr 20 '13 at 13:18

Manish Mishra · Answer 5 · 2013-04-20T13:07:58.617

0

why not make it super simple:

$('#all').on("change",function(){
    $('input:checkbox').not('#all').each(function(a,b){
           var _checked=$('#all').is(":checked");
          $(b).prop('checked',_checked)
        });
});

see this fiddle

edited Apr 20 '13 at 13:07

answered Apr 20 '13 at 12:55

Manish Mishra

12,163
5
35
59

Check box with jQuery

5 Answers5