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

如果你包在一个容器中的单选按钮，然后你可以使用的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> 

Answer 3

我甚至会添加到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; 
    }); 
});