SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Zaggs's Avatar
    Join Date
    Feb 2005
    Posts
    1,045
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle checkboxes (select/unselect all) with jQuery

    Hi Guys!

    Im trying to toggle checkboxes on my form with a jQuery function I found. It works, except for the fact the checkbox which I use to select all the other checkboxes does not get checked itself. Any idea why that might be?

    Code:

    Code:
    ;(function(d){d.fn.toggleCheckboxes=function(a,b){a=a||"*";b=b||false;var c=d([]);this.each(function(){var e=d("input[type=checkbox]",this).filter(a).each(function(){this.checked=!this.checked}).filter(":checked");c=e});if(!b){c=this}return c};d.fn.checkCheckboxes=function(a,b){a=a||"*";b=b||false;var c=d([]);this.each(function(){var e=d("input[type=checkbox]",this).filter(a).each(function(){this.checked=true}).filter(":checked");c=e});if(!b){c=this}return c};d.fn.unCheckCheckboxes=function(a,b){a=a||"*";b=b||false;var c=d([]);this.each(function(){var e=d("input[type=checkbox]",this).filter(a).each(function(){this.checked=false}).filter(":not(:checked)");c=e});if(!b){c=this}return c};d.radioCheckboxGroup=function(e,a){a=a||"*";var b="input[type=checkbox]";if(e){b+="[name="+e+"]"}var c=d(b).filter(a);c.click(function(){c.not(this).each(function(){this.checked=false}).end()})}})(jQuery);
    Code:
    <form method="post" action="jobs.php" id="default-form">
    <input type="checkbox" onClick="$('#default-form').toggleCheckboxes();" />
    
    <input type="checkbox" name="job[]" value="1" />
    <input type="checkbox" name="job[]" value="2" />
    <input type="checkbox" name="job[]" value="3" />
    </form>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    South Africa
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think it has something to do with the name fo the checkbox that toggle the other check boxes

    you could always add a piece of code that manually checks/unchecks the toggle checkbox

    <html>
    <head>
    <title>Untitled Page</title>
    <script type="text/javascript">
    function tgl()
    {
    var els = document.getElementsByName('cb');
    for(var i =0;i<els.length;i++)
    {
    if(document.getElementById('cbmain').checked)
    {
    els[i].checked=true;
    }
    else
    {
    els[i].checked=false;
    }
    }
    }
    </script>
    </head>
    <body>
    <form id="form1">

    <input type="checkbox" id="cbmain" onclick="tgl();" />Toggle Checkboxes
    <br />
    <input type="checkbox" name="cb" value="1" />checkbox 1
    <br />
    <input type="checkbox" name="cb" value="2" />checkbox 2
    <br />
    <input type="checkbox" name="cb" value="3" />checkbox 3
    <br />
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •