如何使用 JavaScript 設置單選按鈕狀態

Question

最好使用哪種方法通過 JavaScript 選擇性地將單個或多個單選按鈕設置為所需的設置？

Answer 1

很簡單

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

Answer 2

表格

<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="dinosaurs" 的 value="aa"。

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

Answer 3

香草Javascript：

yourRadioButton.checked = true;

jQuery：

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

或者

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

Answer 4

您還可以顯式設置單選按鈕的值：

<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 上的示例。

Answer 5

/**
 * 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;
        }
    }
}

Answer 6

嘗試

 myRadio.checked=true

 <input type="radio" id="myRadio">My radio<br>

Answer 7

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

Answer 8

我正在文檔片段中配置一個單選按鈕，並嘗試使用radiobtn.checked = true; .

那沒有用，所以我改用了這個解決方案：

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

Answer 9

這將使用名稱設置檢查以循環遍歷元素，並使用值檢查將所需元素設置為真。 我讓它盡可能簡單，很容易將它放入函數或循環等中。

變量“nameValue”是單選元素名稱值

匹配時的變量“值”設置單選按鈕

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

Answer 10

rbtn = document.getElementById("btnid");<br />
rbtn.checked = true;