Question

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

如果没有标记任何无线电元素，请标记第一个必须的。

Answer 1

我的期望是默认选择第一个项目，然后你应该使用HTML而不是javascript，请注意你不应该在你的情况下使用两个具有相同id的HTML元素，你应该用一个替换class和/或为元素添加唯一ID。

<input type="radio" class="elemainfoto" id="item1" checked>
<input type="radio" class="elemainfoto" id="item2">
<input type="radio" class="elemainfoto" id="item3>

根据RobG评论更新了答案。

Answer 2

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

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

Answer 4

通过给出相同名称的单选按钮来形成单选按钮组。 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;
}

Answer 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

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

5 个答案: