[英]Javascript - If no radio buttons are selected, check the first one
我是 JavaScript 的初学者。我的动态页面上有几个单选按钮,我想创建一个脚本来执行以下操作:
HTML:
<input type="radio" id="elemainfoto">
<input type="radio" id="elemainfoto">
<input type="radio" id="elemainfoto">
JavaScript:
var radio = '#elemainfoto',
if(radd.value == 0) {
radd.checked the first radio element,
} else {
keep the way it is,
}
如果没有标记任何无线电元素,则标记第一个必填项。
我您的期望是默认选择第一个项目,那么您应该使用 HTML 而不是 javascript,请注意,在您的情况下,您不应使用具有相同 id 的两个 HTML 元素,您应该替换为一个类和/或为元素添加唯一 ID。
<input type="radio" class="elemainfoto" id="item1" checked>
<input type="radio" class="elemainfoto" id="item2">
<input type="radio" class="elemainfoto" id="item3>
根据 RobG 评论更新了答案。
在纯 JS 中是这样的(我将 id 更改为 classes id 应该是唯一的):
var radio = document.querySelectorAll('.elemainfoto'),
checked = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
checked = true;
break;
}
}
if (!checked) {
radio[0].checked = true;
}
else {
alert('something is checked')
}
用 jQuery 稍微短一点:
var $radio = $('.elemainfoto');
if (!$radio.filter(':checked').length) {
$radio[0].checked = true;
}
else {
alert('something is checked')
}
在 html 中多次使用具有相同值的 'id' 属性是无效的,您应该使用“name”作为输入。
HTML:
<input type="radio" name="elementinfoto" value="1" />
<input type="radio" name="elementinfoto" value="2" />
<input type="radio" name="elementinfoto" value="3" />
JavaScript:
var radio = document.getElementsByName('elementinfoto'); // get all radio buttons
var isChecked = 0; // default is 0
for(var i=0; i<radio.length;i++) { // go over all the radio buttons with name 'elementinfoto'
if(radio[i].checked) isChecked = 1; // if one of them is checked - tell me
}
if(isChecked == 0) // if the default value stayed the same, check the first radio button
radio[0].checked = "checked";
示例:http: //jsfiddle.net/yxm4N/2/
单选按钮组是通过为单选按钮提供相同的名称而形成的。 ID 是可选的,通常不是必需的。 如果提供了 ID,则每个 ID 应具有不同的值。 按钮应该有一个值,以便它们存在的意义。
要默认选择一个按钮,只需设置所选按钮的选中属性:
<form id="foo">
<input type="radio" name="elemainfoto" valu="0" checked>0<br>
<input type="radio" name="elemainfoto" valu="1">1<br>
<input type="radio" name="elemainfoto" valu="2">2<br>
<input type="reset">
</form>
现在,如果没有选择其他按钮,或者表单被重置,则将选择一个按钮。 请注意,如果您没有将按钮设置为默认选择,那么一旦用户选中一个按钮,取消选择它的唯一方法是选择同一组中的不同单选按钮,或使用重置按钮(如果提供)。
如果要在脚本中设置默认选中按钮,有几个选项。 一种是:
var buttons = document.getElementsByName('elemainfoto');
buttons[0].defaultChecked = true;
如果您真的想检查是否选择了一个,请在表单中添加如下按钮:
<input type="button" value="Check buttons" onclick="checkButtons(this);">
那么checkButtons函数可以是:
function checkButtons(el) {
var buttons;
var form = el && el.form;
if (form) {
buttons = form.elemainfoto;
for (var i=0, iLen=buttons.length; i<iLen; i++) {
// If a button is checked, return its value
if (buttons[i].checked) {
return buttons[i].value;
}
}
}
// Otherwise, try to check the first one and return undefined
buttons && buttons[0].checked;
}
你需要知道如何使用无线电元素。 Id 在 html 页面中是唯一的。 您应该为每个单选元素分配相同的名称。
<input type="radio" name="elemainfoto" id="first" value="1" />
element 1
<input type="radio" name="elemainfoto" id="second" value="2" />
element 2
<input type="radio" name="elemainfotor" id="thrid" value="3" />
element 3
如果您想将第一个单选按钮选中为默认值,请在输入标签属性中设置它。
<input type="radio" name="elemainfoto" id="first" value="1" checked="true"/>
element 1
或者你也可以用javascript来做,
$("input:radio[name=elemainfoto]:first").attr('checked', true);
您可以为每个单选按钮单击执行操作,以了解选中了哪个项目
$(function(){
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
alert($(this).val());
}
});
});
如果您想为每个单选按钮执行单独的操作,请尝试以下代码
$(function () {
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
if ($(this).val() == '1') alert('first radio element is checked');
if ($(this).val() == '2') alert('second radio element is checked');
if ($(this).val() == '3') alert('third radio element is checked');
}
});
});
看这个小提琴演示
而不是选择第一个,我更喜欢使用 null
const radio = document.querySelectorAll('.timescale');
let timescale;
if (radio.checked) {
timescale = $('input[name=timescale_radio_buttons]:checked').val()
} else timescale = null;
你可以用更少的代码这样写
HTML
<input type="radio" name="elementinfoto" value="1" />
<input type="radio" name="elementinfoto" value="2" />
<input type="radio" name="elementinfoto" value="3" />
JavaScript
const fields = document.getElementsByName('elementinfoto');
const value = fields.filter(el => el.checked).shift()?.value || null;
if(!value) {
fields.shift().checked = true;
}
如果您愿意,可以将 function shift()
替换为[0]
以获得第一个元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.