Question

我很难使用jQuery使复选框像收音机一样，所以我只能检查三个复选框中的一个

<legend>Choose your delivery option!</legend>
<label>
    <input type="checkbox" id="delivery" name="delivery" value="standard" />
    Standard Delivery
</label>
<label>
    <input type="checkbox" id="delivery" name="delivery" value="2day" />
    2 Day Shipping
</label>
<label>    
    <input type="checkbox" id="delivery" name="delivery" value="overnite" />
    Overnight Shipping
</label>

Answer 1

然后使用“radio”属性。 type="radio"

顺便说一下，不要使用具有相同id的多个元素。

这是你应该怎么做的：

<legend>Choose your delivery option!</legend>
                <label><input type="radio" id="delivery" name="delivery" value="standard" />Standard Delivery</label>
                <label><input type="radio" id="delivery" name="delivery" value="2day" />2 Day Shipping</label>
                <label><input type="radio" id="delivery" name="delivery" value="overnite" />Overnight Shipping</label>

但是，如果您想完成作业，可以执行以下操作：

$('.checkbox').click(function(){
    $('.checkbox').each(function(){
        $(this).prop('checked', false); 
    }); 
    $(this).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<legend>Choose your delivery option!</legend>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="standard" />Standard Delivery</label>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="2day" />2 Day Shipping</label>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="overnite" />Overnight Shipping</label>

Answer 2

如果它只是你关注的显示部分，那么只有一个完全的css和html解决方案。您仍然使用单选按钮，但将其显示修改为自定义显示。

以下是一个例子：

<input type="radio" name="delivery" id="standard" value="standard" class="delivery-option"/><label for="standard" class="delivery-label"> Standard </label>
<input type="radio" name="delivery" id="today" value="today" class="delivery-option"/><label for="today" class="delivery-label"> Today </label>
<input type="radio" name="delivery" id="overnight" value="overnight" class="delivery-option"/><label for="overnight" class="delivery-label"> Overnight </label>

CSS：

.delivery-label {
    display: block;
    padding-left: 30px;
    position: relative;
}

.delivery-label:before {
    position: absolute;
    width: 15px;
    height: 15px;
    content: '';
    border: 1px solid black;
    left: 0;
}

.delivery-option:checked + .delivery-label:before {
    content: 'x';
    line-height: 15px;
    text-align: center;
}

.delivery-option {
    position: absolute;
    margin-left: -1000px;
}

请注意，此处的重要部分是标签的'for'属性将其连接到相应输入字段的'id'。这是编写语义正确的html的正确方法。

执行此操作时，单击标签与单击输入字段相同。这就是让它发挥作用的诀窍。

此外，不需要复制ID。重复的id在语义上是不正确的HTML，也会破坏这种默认的html函数。

这是工作的jsfiddle： https://jsfiddle.net/bacuxng7/1/

Answer 3

你绝对应该在这里使用单选按钮。并纠正你的老师，因为这不是一个真正的开发人员会做的事情。

但如果他坚持，请看看onchange事件：

$(document).on('change', 'input[name=delivery]', function() {
    //Something with $(this).siblings() ;-)
});

哦，并且不要像@Gustaf已经指出的那样多次使用相同的id。

Answer 4

<强> HTML

<input type="checkbox" name="a" value="a">A
<input type="checkbox" name="b" value="b">B
<input type="checkbox" name="c" value="c">c
<input type="checkbox" name="d" value="d">D

试试这个 jQuery 代码：

$('input[type="checkbox"]').on('change',function(){
  $('input[type="checkbox"]').each(function(){
    $(this).prop('checked', false);
  });
  $(this).prop('checked', true);
 alert($(this).val());
});

这里是fiddle

如何制作单选按钮等复选框

4 个答案: