preload
Rails Observer Dynamically updating selectlist using Jquery and Ajax
Nov 13

In many website we have seen that on checked or unchecked one box

all the check box are checked or unchecked.

Now in this article i am showing how to checked unchecked all the check box

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
     	$("#check_all").live("click",function(event)
	    {
		    if($("#check_all").hasClass('not_checked'))
		    {
			    $("#check_all").removeClass('not_checked');
			    $(".check-box").attr('checked',true);
		    }
		    else
		    {
			    $("#check_all").addClass('not_checked');
			    $(".check-box").attr('checked',false);
		    }
	  });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td>Select/Deselect</td>
        <td><input type="checkbox" class="check-box not_checked" id="check_all"></td>
      </tr>
      <tr>
        <td>First</td>
        <td><input type="checkbox" class="check-box" id="check_box2"></td>
      </tr>
      <tr>
        <td>Second</td>
        <td><input type="checkbox" class="check-box" id="check_box3"></td>
       </tr>
       <tr>
         <td>Third</td>
         <td><input type="checkbox" class="check-box" id="check_box4"></td>
      </tr>
    </table>
  </body>
</html>

In this setting checked attribute true/false alternatively by clicking on
select/deselect for alternate removing and adding class
not_checked depending upon that we are setting true and false

Share and Enjoy:
  • Print
  • Digg
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Twitter
  • RSS
  • email
  • Blogplay

One Response to “Select/Deselect Multiple CheckBox Using Jquery”

  1. 使用jQuery实现多复选框选择和取消选择 » Eric Lo Says:

    [...] 原文: Select/Deselect Multiple CheckBox Using Jquery [...]

Leave a Reply