-
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?
-
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.
-
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".
-
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>
