Input选项框的回填与取值

开发工具与关键技术：Visual Studio 2015，C# 
作者：谢天林 
撰写时间：2019年07月25日

第一点：主要的内容
截图展示：

第二点：功能点的代码流程：
1.CSS样式只是平时简单的就好

   单选框
   
   

   多选框
   

2. 选项框的数据回填：

//单选框
       if (data.ConnectBoxState) {//data是参数，ConnectBoxState是布尔值
                 $("#TheOne1").attr("checked", "checked");//添加属性
                 $("#TheOne2").removeAttr("checked");//移除属性
        } else {
                 $("#TheOne1").removeAttr("checked");//添加属性
                 $("#TheOne2").attr("checked", "checked");//移除属性
        }

//多选框
       if (data.ConnectBoxState) {//data是参数，ConnectBoxState是布尔值
                 $("#TheCheckbox").attr("checked", "checked");//添加属性
        } else {
                 $("#TheCheckbox").removeAttr("checked");//移除属性
        }

3. 选项框的获取数据：

//单选框(获取数据说明：选中时值是”on”，没选中时值是undefined)
        var TheOne1 = $("#TheOne1:checked").val();//”:checked”是获取属性
        var TheOne2 = $("#TheOne2:checked").val();//”:checked”是获取属性
        var BOOLVALUE; //声明接收数据的变量
        if (TheOne1 == "on" && TheOne2 == undefined) {
            BOOLVALUE = true; //赋值为布尔值true，或其它的，比如：男
        } else {
            BOOLVALUE = false; //赋值为布尔值false，或其它的，比如：女
        }

//多选框(获取数据说明：选中时值是”on”，没选中时值是undefined)
        var TheCheckbox = $("#TheCheckbox:checked").val();//”:checked”是获取属性
        if (TheCheckbox=="on") {
            TheCheckbox = true; //赋值本身
        } else {
            TheCheckbox = false; //赋值本身
        }//我这里只写了一个框，多几个框的写法都是相类似的

4.友情链接：
有时我们会遇到选项框点击不了的情况，这可能是负数的左外边距造成的。
当选项框的宽高都等于20的时候，设置左边距为-10的时候，左边一半是点击不了的，右边一边还是可以点击的；同样的，当左边距为-20的时候，这个选项框就选择不了。（注：这里只针对左外边距）

第三点：总结
选项框的数据回填必须要先用jquery的removeAttr方法移除checked属性，再重新添加checked属性时才会生效。

选项框的获取数据主要是在ID后面加个”:checked”获取属性值

其实你只要知道方法就没什么难的，我们只是缺少对知识的认知而已。

如有错漏，感谢纠正！