Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

multiple checkbox

Dear EE,
I have 4 checkbox category
1. All Check
2. 20s age check
3. 30s age check
4. 40s age check
Inside <form> i have multiple checkboxes which I have distinguished by Id2,Id3 so on for 20s,30s respectively.

how can I checked 1. for all, 2. for 20s, 3. for 30s etc.

any sample code would be very much appreciated
Thankk you
0
saloj
Asked:
saloj
1 Solution
 
ProculopsisCommented:

Do you mean something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26895677.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[id^=range-]").click( function() {
    var checked = $(this).get(0).checked;
    var selector = "input[class^=" + $(this).attr( "id" ) + "]"
    $(selector).each( function() {
      $(this).get(0).checked = checked;
    });
  });

});

</script>
</head>
<body>

Toggle All: <input id="range-" type="checkbox" />
Toggle 20s: <input id="range-20" class="range-" type="checkbox" />
Toggle 30s: <input id="range-30" class="range-" type="checkbox" />
Toggle 40s: <input id="range-40" class="range-" type="checkbox" />

<table id="my-table" border="1">
<tr><td> 20: <input class="range-20" type="checkbox" /> 30: <input class="range-30" type="checkbox" /> 40: <input class="range-40" type="checkbox" /> </td></tr>
<tr><td> 20: <input class="range-20" type="checkbox" /> 30: <input class="range-30" type="checkbox" /> 40: <input class="range-40" type="checkbox" /> </td></tr>
<tr><td> 20: <input class="range-20" type="checkbox" /> 30: <input class="range-30" type="checkbox" /> 40: <input class="range-40" type="checkbox" /> </td></tr>
<tr><td> 20: <input class="range-20" type="checkbox" /> 30: <input class="range-30" type="checkbox" /> 40: <input class="range-40" type="checkbox" /> </td></tr>
<tr><td> 20: <input class="range-20" type="checkbox" /> 30: <input class="range-30" type="checkbox" /> 40: <input class="range-40" type="checkbox" /> </td></tr>
</table>

</body>
</html>

Open in new window

0
 
Manikandan1986Commented:
Please try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <meta name="author" content="user_" />

      <title>Untitled 1</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <script type="text/javascript">
                  $(document).ready(function() {
                             
                              $("#all").click(
                                    function() {  
                                           var status = $(this).attr("checked");
                                           $('.all').each(function(index) {
                                                                     $(this).attr("checked", status);
                                                              });

                                         
                                     }
                              );
                             
                              $('.all').click(
                                    function() {  
                                    var status = true;
                                    $('.all').each(function(index) {
                                                                     if(status)
                                                                     {
                                                                           status = $(this).attr("checked");
                                                                     }
                                                       });
                                                       $("#all").attr("checked", status);
                                 }
                              );
                  });
            </script>
</head>

<body>

<input type="checkbox" name="all" id="all"/> All
<input type="checkbox" name="twenty" class="all"/>20s age
<input type="checkbox" name="thirty" class="all"/>30s age
<input type="checkbox" name="forty" class="all"/>40s age

</body>
</html>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now