【问题标题】: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函数的可能方式是什么?

【问题讨论】:

标签: javascript


【解决方案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>

    【讨论】:

      猜你喜欢
      • 2012-04-23
      • 1970-01-01
      • 1970-01-01
      • 2016-01-09
      • 2018-06-27
      • 2011-08-13
      • 2018-08-01
      • 1970-01-01
      • 2023-04-10
      相关资源
      最近更新 更多