onmouseover检查输入单选按钮，仅javascript

Question

Instead of clicking on a radio button, how can we create a onmouseover event and javascript to make the radio button checked when simply hovering onto it? Please no jQuery.

 <input type="radio" class="tryout" name="example" onmouseover="checkButton()" checked="checked"> <input type="radio" class="tryout" name="example" onmouseover="checkButton()"> <input type="radio" class="tryout" name="example" onmouseover="checkButton()"> <input type="radio" class="tryout" name="example" onmouseover="checkButton()"> 

Answer 1

You would have the checkButton function pass in the element as the parameter then set the element.checked to true. For example:

 function checkButton(element){ element.checked = true; } 

 <input type="radio" class="tryout" name="example" onmouseover="checkButton(this)" checked="check"> <input type="radio" class="tryout" name="example" onmouseover="checkButton(this)"> <input type="radio" class="tryout" name="example" onmouseover="checkButton(this)"> <input type="radio" class="tryout" name="example" onmouseover="checkButton(this)"> 

Answer 2

I would even add to what jakekimds did and avoid putting your javascript inline on your inputs to separate presentation and functionality. So you would get

HTML

<input type="radio" class="tryout" name="example1">
<input type="radio" class="tryout" name="example2">
<input type="radio" class="tryout" name="example3">
<input type="radio" class="tryout" name="example4">

JS

var inputs = document.getElementsByClassName('tryout');
[].forEach.call(inputs, function(el){
    el.addEventListener('mouseenter',function(){
        this.checked = true;
    });
});

Answer 3

If you wrap the radio buttons in a container, you can then use document.getElementById to attach an event handler. That way, if your JavaScript changes, your HTML doesn't.

<span id="radio-buttons">
    <input type="radio" class="tryout" name="example" checked="check">
    <input type="radio" class="tryout" name="example">
    <input type="radio" class="tryout" name="example">
    <input type="radio" class="tryout" name="example">
</span>
<script>
document.getElementById("radio-buttons").onmouseover = function (e) {
    e.target.checked = true;
}
</script>