Javascript - 如果没有选择单选按钮，请检查第一个

Posted 2023-03-05

【中文标题】Javascript - 如果没有选择单选按钮，请检查第一个

【英文标题】：Javascript - If no radio buttons are selected, check the first one

【发布时间】：2014-04-13 13:39:16

【问题描述】：

我是 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,
    

如果没有标记任何单选元素，则标记第一个必填项。

【问题讨论】：

document.querySelectorAll('[type="radio"]')[0].checked = true?哦.. 你不能有重复的 ID，所以你的 html 是无效的。

一个有效的 HTML 页面不能有重复的 ID。此代码不起作用。将 ID 更改为类，并将伪代码更改为实际语法。你应该到达（非常接近）你的解决方案

你想要一种默认的行为吗？

是的，阿米特·乔基。 Jquery 很酷！

只需将第一个设置为默认选择，无需脚本。

【参考方案1】：

我您的期望是默认选择第一个项目，那么您应该使用 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 评论更新了答案。

【讨论】：

单选按钮是动态生成的，所以我不能这样做。

选中的属性是boolean attribute，它没有任何值。如果需要一个（仅适用于 XHTML，未在 Web 上使用），该值必须与属性名称相同，即 checked="checked"。

@user2697222——当然可以，只需在创建按钮后设置 checked 属性或 defaultChecked 属性。

是动态生成时可能会选择 不同 选项的问题（可能基于数据库值？），因此您需要允许这样做，而不仅仅是设置第一个默认？

【参考方案2】：

在纯 JS 中这样的东西（我将 ids 更改为 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')

【讨论】：

Filter 在这种情况下似乎效率很低。你就不能做if(!$('.RB:checked').length)...

@War10ck 我可以，但它的效率会降低，因为在if 内部，您需要再次重新选择电台集合。

啊，我明白你现在在做什么了。这很聪明。我以前从未使用过。每天学些新东西。谢谢哥们。 :)

【参考方案3】：

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

【参考方案4】：

单选按钮组是通过为单选按钮赋予相同的名称而形成的。 ID 是可选的，通常不是必需的。如果提供了 ID，则每个 ID 应具有不同的值。并且按钮应该有一个值，以便它们存在的意义。

要默认选择一个按钮，只需设置所选按钮的 checked 属性：

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

【参考方案5】：

你需要知道如何使用无线电元素。 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');
        
    );
);

看到这个小提琴DEMO

【参考方案6】：

我更喜欢使用null，而不是选择第一个

const radio = document.querySelectorAll('.timescale');

let timescale;

if (radio.checked) 
  timescale = $('input[name=timescale_radio_buttons]:checked').val()

 else timescale = null;