views:

187

answers:

2

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.

A: 

You don't have to change your inputs' event to make unobstrusive JavaScript. Agents that can't do JavaScript will just ignore onmouseover attribute. And since I hope you generate checkboxes on the server-side in the loop, there's no need to fear copypasting.

codeholic
A: 

I'd consider grabbing jQuery for anything client side. For example, your question can be very easily modeled in jQuery and with extremely less code:

$(':checkbox').mouseover(function()
{
    this.checked = !this.checked;
});

This grabs all the check boxes on your page, attaches a mouseover event to them, and then when a mouse over occurs, it simply toggles the state of the checked attribute on the element.

Tejs
Thank you for help guys! :)
Dean