如何使用JavaScript设置单选按钮状态

How to set radio button status with JavaScript

本文关键字：单选按钮 状态 设置 JavaScript 何使用      更新时间：2023-09-26

使用JavaScript将单个或多个单选按钮选择性地设置为所需设置时，最好使用哪种方法？

非常简单的

radiobtn = document.getElementById("theid");
radiobtn.checked = true;

表单

<form name="teenageMutant">
  <input value="aa" type="radio" name="ninjaTurtles"/>
  <input value="bb" type="radio" name="ninjaTurtles"/>
  <input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

默认情况下，如果删除"已选中"，则会选中value="cc"。第一次加载表单时，不会选中任何框。

document.teenageMutant.ninjaTurtles[0].checked=true;

现在检查value="aa"。其他单选复选框未选中。

看看它的实际操作：http://jsfiddle.net/yaArr/

您可以使用表单id和单选按钮id来执行同样的操作。这是一个带有id的表单。

<form id="lizardPeople" name="teenageMutant">
  <input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
  <input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
  <input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>

默认情况下会选中value="cc"。

document.forms["lizardPeople"]["dinosaurs"].checked=true;

现在检查了id为"恐龙"的value="aa"，就像以前一样。

在行动中看到它：http://jsfiddle.net/jPfXS/

您还可以显式设置单选按钮的值：

<form name="gendersForm">
  <input type="radio" name="gender" value="M" /> Man
  <input type="radio" name="gender" value="F" /> Woman
</form>

使用以下脚本：

document.gendersForm.gender.value="F";

并且相应的单选按钮将被自动检查。

看看JSFiddle上的例子。

香草Javascript：

yourRadioButton.checked = true;

jQuery:

$('input[name=foo]').prop('checked', true);

或

$("input:checkbox").val() == "true"

/**
 * setCheckedValueOfRadioButtonGroup
 * @param {html input type=radio} vRadioObj 
 * @param {the radiobutton with this value will be checked} vValue 
 */
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
    var radios = document.getElementsByName(vRadioObj.name);
    for (var j = 0; j < radios.length; j++) {
        if (radios[j].value == vValue) {
            radios[j].checked = true;
            break;
        }
    }
}

尝试

myRadio.checked=true
<input type="radio" id="myRadio">My radio<br>

我正在文档片段中配置一个单选按钮，并尝试使用radiobtn.checked = true;。

这不起作用，所以我选择了这个解决方案：

radiobtn.setAttribute("checked", "checked");

$("#id_of_radiobutton").prop("checked", true);

这将使用name进行检查以循环元素，并使用值检查将所需元素设置为true。我让它尽可能简单，把它放入函数或循环中非常容易，等等。

变量"nameValue"是无线电元素的名称值

变量"值"匹配时设置单选按钮

Array.from(  document.querySelectorAll('[name="' + nameValue + '"]')   ).forEach((element,index) =>
                {
                    if (value === element.value) {
                        element.checked = true;
                    } else {
                        element.checked = false;
                    }
                });
相关文章：