javascript - 为单选按钮中的一项选择创建规则

Question

我想创建一条规则，强制用户仅选择一个单选值。但是，当按钮循环时，它允许选择多个，并且不允许用户删除点击

var now = document.getElementsByName("now");
var day = document.getElementsByName("day");
var week = document.getElementsByName("week");

if ($("#now").prop("checked", true)) {

    day[0].checked = false
    week[0].checked = false

} else if ($("#day").prop("checked", true)) {

    now[0].checked = false
    week[0].checked = false

} else if ($("#week").prop("checked", true)) {

    now[0].checked = false
    day[0].checked = false

} else {
    console.log("undefined radio")
}

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="day" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="week" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

Answer 1

如果您为所有单选按钮提供相同的名称属性，您将只能选择其中一个。

例如，给予所有name="now"。

<h1>Select action</h1>
<br>
<label class="control control--radio">Shoot Now
    <input type="radio" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="now" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="now" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>

除了您的问题之外:

not let the user remove click

这是因为单选按钮无法取消选择，您应该使用复选框。

<input type="checkbox" id="your_id" name="your_name" value="your_value">

<h1>Select action</h1>
<br>
<form>
<label class="control control--radio">Shoot Now
    <input type="checkbox" name="now" id="now" value="now" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a day
    <input type="radio" name="now" id="day" value="0 * * * *" autofocus/>
    <div class="control__indicator"></div>
</label>
<label class="control control--radio">Shoot 1x a week
    <input type="radio" name="now" id="week" value="0 * * * 1" autofocus/>
    <div class="control__indicator"></div>
</label>
</form>