onmouseover 仅检查输入单选按钮 javascript
onmouseover check a input radio button javascript only
我们如何创建 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()">
您可以将 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)">
如果将单选按钮包装在容器中,则可以使用 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>
我什至会补充 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;
});
});
我们如何创建 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()">
您可以将 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)">
如果将单选按钮包装在容器中,则可以使用 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>
我什至会补充 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;
});
});