单选框radiobutton的选中取消

单选框radiobutton不同于复选框checkbox,一旦被点击,就总有一个会被选中,不能取消。如果要将单选框恢复为一个都没有被选中的原始状态,应该怎么办?这时就要借助于万能的JS了。

思路:
radiobutton组中,每个radiobutton都有一个value,这是个开关值,有2个值可供选用,比如"0"和"1",用于记录该单选框是否处于选中状态。当单选框被点击时,将value的值切换成另一个值,从而根据这个value来决定单选框的checked为 true 或者 false。为什么不直接读取checked的呢?对于单选框来说,checked还真不行,因为点击的时候,单选框的checked永远等于true,起不到什么参考的意义。

//假设有一组单选框。。。
$(function(){
	//从json文件中读取数据,生成一个radiobutton组。
    $.getJSON(/*[[@{/data/layer/basemaps.json}]]*/'', function (data) {
        let ul = $(".bm-gallery ul");
        ul.empty();
        for(let i in data){
                let li = "<li><input type='radio' name='rdBms' id='" + data[i].id + "' value='0' url='" + data[i].nodePath + "' οnclick='bl_chkIt(this)'"
                    + " nodeType='" + (data[i].nodeType ? data[i].nodeType : "" ) + "'>"
                    + data[i].title + "</li>";
            ul.append(li);
        }
    });
});
function bl_chkIt(obj){//当radioButton被鼠标点击
    let radioCheck= $(obj).val();
    if("1" == radioCheck){//目前处于选中状态
        $(obj).attr("checked",false);//取消选中
        $(obj).val("0");
    } else {
    	//先全部取消选中
        $(".bm-gallery ul li input[type=radio]").val("0");
        //再设置当前单选框选中
        $(obj).val("1");
    }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值