Manipulate multiple check boxes by ID using unobtrusive java script?
Posted
by Dean
on Stack Overflow
See other posts from Stack Overflow
or by Dean
Published on 2010-04-27T10:57:11Z
Indexed on
2010/04/27
11:33 UTC
Read the original article
Hit count: 334
I want to be able to select multiple check boxes onmouseover, but instead of applying onmouseover to every individual box, I've been trying to work out how to do so by manipulating check boxes by ID instead, although I'm not sure where to go from using getElementById,. So instead of what you see below.
<html>
<head>
<script>
var Toggle = true;
var Highlight=false;
function handleKeyPress(evt) {
var nbr;
if (window.Event) nbr = evt.which;
else nbr = event.keyCode;
if(nbr==16)Highlight=true;
return true;
}
function MakeFalse(){Highlight=false;}
function SelectIt(X){
if(X.checked && Toggle)X.checked=false;
else X.checked=true;
}
function ChangeText()
{
var test1 = document.getElementById("1");
test1.innerHTML = "onmouseover=SelectIt(this)"
}
</script>
</head>
<body>
<form name="A">
<input type="checkbox" name="C1" onmouseover="SelectIt(this)" id="1"><br>
<input type="checkbox" name="C2" onmouseover="SelectIt(this)" id="2"><br>
<input type="checkbox" name="C3" onmouseover="SelectIt(this)" id="3"><br>
<input type="checkbox" name="C4" onmouseover="SelectIt(this)" checked="" disabled="disabled" id="4"><br>
<input type="checkbox" name="C5" onmouseover="SelectIt(this)" id="5"><br>
<input type="checkbox" name="C6" onmouseover="SelectIt(this)" id="6"><br>
<input type="checkbox" name="C7" onmouseover="SelectIt(this)" id="7"><br>
<input type="checkbox" name="C8" onmouseover="SelectIt(this)" id="8"><br>
</form>
</body>
</html>
I want to be able to apply the onmousover effect to an array of check boxes like this
<form name="A">
<input type="checkbox" name="C1" id="1"><br>
<input type="checkbox" name="C2" id="2"><br>
<input type="checkbox" name="C3" id="3"><br>
<input type="checkbox" name="C4" checked="" disabled="disabled" id="4"><br>
<input type="checkbox" name="C5" id="5"><br>
<input type="checkbox" name="C6" id="6"><br>
<input type="checkbox" name="C7" id="7"><br>
<input type="checkbox" name="C8" id="8"><br>
</form>
After trying the search feature of stackoverflow.com and looking around on Google I haven't been able to a find a solution that makes sense to me thus far, although I'm still in the process of learning so I fear I might be trying to do something too advanced for my level of knowledge.
© Stack Overflow or respective owner
