如下图,当有一组radio,如果选中一个后,默认必须选中其中一个,如何才能实现取消选中所有项呢?
最好的操作习惯是再次点击选中项 自动取消选中状态,但是默认情况下,点击选中的radio,还是选中状态 ,下面我们通过js改变这种默认形为,以达到点击选中项自动 取消选择的目的:
html:
<label class="ms-radio ms-radio-default">
<input type="radio" name="a">nano卡
</label>
<label class="ms-radio ms-radio-default">
<input type="radio" value="b" name="a">二切卡
</label>
<label class="ms-radio ms-radio-default">
<input type="radio" value="c" name="a">三切卡
</label>
js:
//radio点击前的选中状态
var _is_checked_ = false;
$("input[type=radio]").mousedown(function () {
//记录radio点击前的选中状态
_is_checked_ = $(this).prop("checked");
}).click(function (e) {
var iput = $(this);
if (_is_checked_) {
//如果radio点击前是选中状态,则取消选中
iput.prop("checked", false);
}
});
$("input[type=radio]").parent().click(function (e) {
//记录radio外label被点时radio的选中状态
_is_checked_ = $(this).children("input:first").prop("checked");
});