为单选按钮创建一个选择规则

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

如果您给所有radio button相同的name property，则只能选择其中之一。

例如，给出全部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>

Answer 2

如果您的单选按钮名称相同，则一次只能单击1

<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>

Answer 3

如果您这样做，就可以实现自己的目标。

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

P.S：如果您需要做更多的网络通信。