CODEWITHSUNDEEP
jquery
Mohammed Allam
Mohammed Allam

Reputation: 59

Check box with jQuery

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.

Upvotes: 1

Views: 787

Answers (5)

Mitul
Mitul

Reputation: 3427

$(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"                       
            });         
        }
    });
});

Upvotes: 2

Manish Mishra
Manish Mishra

Reputation: 12375

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

Upvotes: 0

kayz1
kayz1

Reputation: 7434

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

Upvotes: 2

Dogoferis
Dogoferis

Reputation: 614

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);
    }

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

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);
        }
});

Upvotes: 0

Related Questions