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>