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

Question

除了单击单选按钮以外，我们如何创建onmouseover事件和javascript，只需将鼠标悬停在其上，即可checked该单选按钮？ 请不要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

您可以将checkButton函数作为参数传递给元素，然后将element.checked设置为true。 例如：

 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

我什至会添加jakekimds所做的事情，并避免将您的javascript内联在输入上，以分开显示和功能。 所以你会得到

的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

如果将单选按钮包装在容器中，则可以使用document.getElementById附加事件处理程序。 这样，如果您的JavaScript更改了，您的HTML不会更改。

<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>