Checkbox toggle with jQuery

Question

We are calling a jQuery function using onclick on a checkbox. We want that checkbox to toggle all checkboxes below it. Here is the HTML for the toggle checkbox:

    <input type="checkbox" id="toggle" name="toggle" class="daxle_cb" value="" onclick="daxleToggleCB('adminForm');" />

And here is the function:

    function daxleToggleCB( formName )
    {
        jQuery('#' + formName).find('input[type=checkbox]').prop('checked', this.checked);
    };

However, this is not working. What does work is this:

    function daxleToggleCB( formName) {
        jQuery( ':checkbox[name=toggle]' ).click
        (
            function ()
            {
                jQuery( '#'+formName ).find( 'input[type=checkbox]' ).prop( 'checked', this.checked );
            }
        ); 
    };

Although, this function only works on the third click of the checkbox. So the problem is getting the checkboxes to toggle on the first click.

Joshua Wooward · Accepted Answer · 2013-02-04 20:15:17Z

1

first, your not binding your jQuery.click() event until it's been clicked once at least.

then it looks like you have two events firing.

you have the inline onclick event, as well as the jQuery.click event.

answered Feb 4, 2013 at 20:15

Joshua Wooward

1,5082 gold badges10 silver badges12 bronze badges

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

Comments

adeneo · Accepted Answer · 2013-02-04 20:19:27Z

1

<input type="checkbox" id="toggle" name="toggle" class="daxle_cb" value="" />

That looks like an ID ?

$('#toggle').on('change', function() {
    $( this.form ).find('input[type="checkbox"]').prop('checked', this.checked);
})

answered Feb 4, 2013 at 20:19

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Volomike Over a year ago

So simple and elegant!

Pat Burke · Accepted Answer · 2013-02-04 20:17:05Z

0

Your function is defining the click handler inside of the function called with the "onclick" attribute. Instead this should be inside of a Doc-On-Ready function to define the click handler when the page loads and not using the "onclick" attribute.

$(function(){
$( ':checkbox[name=toggle]' ).click
    (
        function ()
        {
           //Your Code Here
        }
    );  
 });

answered Feb 4, 2013 at 20:17

Pat Burke

5905 silver badges13 bronze badges

Comments

Tomas Ramirez Sarduy · Accepted Answer · 2013-02-04 20:25:22Z

0

You just need one click event to your checkbox. Also, you are adding the click event to all the checkboxs on your document, not only inside the form. So, Rewrite your function:

function daxleToggleCB( formName) {

    $('#'+formName+' input:checkbox').click(function(){
        var $inputs = $('#'+formName+' input:checkbox'); 
        if($(this).is(':checked')){                // <-- is current input checked?
           $inputs.prop('checked',this.checked);   // <-- check all
        }
    });
}

Then put this on your document to call the function:

$(document).ready(daxleToggleCB('myForm'));

answered Feb 4, 2013 at 20:25

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

Comments

vitthal-gaikwad · Accepted Answer · 2013-10-23 06:37:47Z

0

$('input[type=checkbox]').click(function(event){
  $(event.currentTarget).val($(event.currentTarget)[0].checked);
});

You can use event object to hander event on all checkboxes.Here is common and short way

answered Oct 23, 2013 at 6:37

vitthal-gaikwad

1,22412 silver badges13 bronze badges

Collectives™ on Stack Overflow

Checkbox toggle with jQuery

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related