Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Checkbox range selector

Status
Not open for further replies.

nirvanadesign

Programmer
Mar 3, 2005
11
GB
Hi Guys

i have a form of check boxes in list order 1 - 20

if i was to check 3 then 9 i would like to auto check 4,5,6,7,8.

so you would be selecting a range by clicking just two checkboxes

How would you do this

 
Doing this is fairly easy... but how would this work after the first two clicks?

For example... after the first two clicks, should it be assumed that there will be no more range clicks?

What if you clicked 3, then 9 (and the auto selection happened), then clicked 7? Should anything happen? What if you then clicked 11?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
ok

if you checked 3 then 9 then 4,5,6,7,8 would be checked if you then checked 14 then 14 would be the max of the range and the boxes would adjust. You could also uncheck the boxes as long as you uncheck them in descending order 14,13,12,11 etc (one at a time)
 
Here is a small test page that I think does what you have described. It recalculates the range each time:
Code:
<html>
<head>
<title>Sample</title>
<style type="text/css">
	input {margin-left:1em;}
</style>
<script type="text/javascript">
<!--//
	function createCheckboxRange() {
		var frmObj = document.getElementById('chkForm');
		var elCollection = frmObj.getElementsByTagName('input');
		var _start = -1;
		for (var loop=0; loop < elCollection.length-1; loop++) {
			if (elCollection[loop].checked && _start == -1) {
				_start = loop + 1;
				break;
			}
		}
		var _end = -1;
		for (var loop=elCollection.length-1; loop >= 0; loop--) {
			if (elCollection[loop].checked && _end == -1) {
				_end = loop + 1;
				break;
			}
		}
		if (_start > -1 && _end > -1) {
			for (var loop=_start; loop < _end; loop++)
				elCollection[loop].checked = true;
		}
	}
//-->
</script>
</head>
<body>
<form id="chkForm">
	<input type="checkbox" name="chk_1" id="chk_1" value="1" onclick="createCheckboxRange()" /><label for id="chk_1">1</label>
	<input type="checkbox" name="chk_2" id="chk_2" value="2" onclick="createCheckboxRange()" /><label for id="chk_2">2</label>
	<input type="checkbox" name="chk_3" id="chk_3" value="3" onclick="createCheckboxRange()" /><label for id="chk_3">3</label>
	<input type="checkbox" name="chk_4" id="chk_4" value="4" onclick="createCheckboxRange()" /><label for id="chk_4">4</label>
	<input type="checkbox" name="chk_5" id="chk_5" value="5" onclick="createCheckboxRange()" /><label for id="chk_5">5</label>
	<input type="checkbox" name="chk_6" id="chk_6" value="6" onclick="createCheckboxRange()" /><label for id="chk_6">6</label>
	<input type="checkbox" name="chk_7" id="chk_7" value="7" onclick="createCheckboxRange()" /><label for id="chk_7">7</label>
	<input type="checkbox" name="chk_8" id="chk_8" value="8" onclick="createCheckboxRange()" /><label for id="chk_8">8</label>
	<input type="checkbox" name="chk_9" id="chk_9" value="9" onclick="createCheckboxRange()" /><label for id="chk_9">9</label>
	<input type="reset" value="Clear"/>
</form>
</body>
</html>
Let us know how you get on!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top