一次只能选择一个单选按钮

Posted 2023-02-24

【中文标题】一次只能选择一个单选按钮

【英文标题】：Only one radio button must be selected at a time

【发布时间】：2017-06-28 09:10:41

【问题描述】：

我想使用 javascript 从两个单选按钮中选择一个单选按钮，这是我的 html 代码

<div class="row">
    <div class="form-group">
        <label class="control-label col-sm-6">Feel Of The Cards : </label>
        <div class="col-sm-6">
            <input type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
            <input type="radio" value="Embossed" name="feel_of_card1" /> Embossed/Linen Finished/Textured Cards
        </div>
    </div>
</div>

我想制作一个单独的功能，其中一个单选按钮将从两个单选按钮中选择？

编写javascript函数的可能方式是什么？

【问题讨论】：

与***.com/questions/9476617/…重复

How to set radio button status with JavaScript的可能重复

来吧，先学习基础，做研究，然后发布问题

how to set that only one radio button can be checked的可能重复

进入javascript前请先学习HTML基础

【参考方案1】：

<div class="row">
                        <div class="form-group">
                        <label class="control-label col-sm-6">Feel Of The Cards : </label>
                        <div class="col-sm-6">
                        <input id="_1234"  type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
                        <input id="_1235" type="radio" value="Embossed" name="feel_of_card" /> Embossed/Linen Finished/Textured Cards</div>
                        </div>
                        </div>

为什么使用 all 而不是 id 值？ 也不要将 CSS 语法（# 表示标识符）与原生 JS 混合 原生 JS 解决方案：

document.getElementById("_1234").checked = true;

jQuery解决方案：

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

【参考方案2】：

您不需要 JavaScript 来执行此操作。只需为两个复选框提供相同的name

<div class="row">
  <div class="form-group">
    <label class="control-label col-sm-6">Feel Of The Cards : </label>
    <div class="col-sm-6">
      <input type="radio" value="NonEmbossed" name="feel_of_card" /> 
      Non Embossed/Smooth Finished<br />
      <input type="radio" value="Embossed" name="feel_of_card" /> 
      Embossed/Linen Finished/Textured Cards
    </div>
  </div>
</div>