CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4

Thread: Checkboxs

  1. #1
    Join Date
    Mar 2006
    Posts
    228

    Question Checkboxs

    Hello,

    I am having a problem with some checkboxs

    what I have is a page with 17 checkboxs.

    as per below:

    [1] [2] [3]
    [4] [5] [6]
    [7] [8] [9]
    [10] [11] [12]

    [13]
    [14]
    [15]
    [16]
    [17]

    The problem I have is..

    A user can only select one check box on the left (1,4,7,10,13,14,15,16,17).

    If a user selects any other checkbox then the ones on the left need to be unchecked.

    A user can select 2,3 together 5,6 together 8,9 together, 11,12 together. (or only select one of them)

    However, you can't select 2,5 together etc. (needs to be in the same line)

    I need to be able to untick a box if the user wants to untick it.

    Anyone able to help?

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Checkboxs

    No matter what...you're stuck with a few different if statements here. Create arrays for each grouping of boxes. Then use indexOf() for the comparing.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Jun 2009
    Posts
    113

    Re: Checkboxs

    Properly speaking, your "checkboxes" for (1,4,7,10,13,14,15,16,17) should be radio buttons which fulfil the function that only one may be selected at any one time. Just make sure they all have the same NAME attribute and change their type to "radio".

  4. #4
    Join Date
    Jun 2009
    Posts
    113

    Re: Checkboxs

    For something like this, it's worth looking at a library like jQuery because it makes it very easy to select related items.
    Here's your application coded in jQuery to only allow checkboxes on the same line as a selected radio button to be checked:

    Code:
    <html>
    <head><title>Checkboxes</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
          $(function(){
    // whenever the radio buttons change (those with class HIGHLANDER)...
    			$('.highlander').change( function() {
    // get all the checkboxes who don't have a classname that matches the selected radio button
    				$('input[type=checkbox]').not(function(){ return $(this).hasClass($(this).attr('id'))}).each(function() { 
    // and uncheck them
    								$(this).removeAttr('checked'); 
    								});
    			});
    // select all checkboxes, and when they change....
    			$('input[type=checkbox]').change(function () {
    // if they have been checked and their corresponding radio button isn't selected (use the checkbox's class to get the radio button's id)
    // then remove the check
    						if ( ($(this).attr('checked')) && ($('#'+$(this).attr('class')+':checked').val()==undefined)) $(this).removeAttr('checked'); 
    						});
    	  });
    </script>
    </head>	 
    <body>
    <input type="radio" class="highlander" value="1"  id="line1" name="highlander"/> <input type="checkbox" class="line1" value="2"/>  <input type="checkbox" class="line1" value="3"/>  <br/>
    <input type="radio" class="highlander" value="4"  id="line2" name="highlander"/> <input type="checkbox" class="line2" value="5"/>  <input type="checkbox" class="line2" value="6"/>  <br/>
    <input type="radio" class="highlander" value="7"  id="line3" name="highlander"/> <input type="checkbox" class="line3" value="8"/>  <input type="checkbox" class="line3" value="9"/>  <br/>
    <input type="radio" class="highlander" value="10" id="line4" name="highlander"/> <input type="checkbox" class="line4" value="11"/> <input type="checkbox" class="line4" value="12"/> <br/>
    
    <input type="radio" class="highlander" value="13" id="line5" name="highlander"/> <br/>
    <input type="radio" class="highlander" value="14" id="line6" name="highlander"/> <br/>
    <input type="radio" class="highlander" value="15" id="line7" name="highlander"/> <br/>
    <input type="radio" class="highlander" value="16" id="line8" name="highlander"/> <br/>
    <input type="radio" class="highlander" value="17" id="line9" name="highlander"/> <br/>
    </body>
    </html>

Posting Permissions

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





Click Here to Expand Forum to Full Width

Featured