单选框radiobutton的选中取消

﹏ヽ暗。殇╰゛Y 2024-04-19 15:41 72阅读 0赞

单选框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");
        }
    }