前端选择控件使用汇总(Checkbox、Radio、Select)

1. 概述

本笔记记录总结前端Checkbox、Radio、Select选择框控件的实用方法及技巧；

2. HTML DOM Checkbox 对象

Checkbox 对象代表一个 HTML 表单中的一个选择框；

2.1. 控件初始化

单个组件：

 1 <input id="chkSelected" type="checkbox" name="cType" value="1" />一组组件：
 2 
 3     <input type="checkbox" name="groupName" value="1" />苹果
 4 
 5     <input type="checkbox" name="groupName" value="2" />梨
 6 
 7     <input type="checkbox" name="groupName" value="3" />香蕉
 8 
 9     <input type="checkbox" name="groupName" value="4" />菠萝
10 
11     <input type="checkbox" name="groupName" value="5" />桃子

2.2. 显示选中项与未选中项

 1 $("#btnShowSelected").bind("click", function () {
 2 
 3     //显示选中项与未选中项
 4 
 5     var strSelected = "", strNoSlected = "";
 6 
 7     $("[name='groupName']").each(function () {
 8 
 9         if ($(this).is(':checked')) {
10 
11             if ("" == strSelected) {
12 
13                 strSelected = $(this).val();
14 
15             }
16 
17             else {
18 
19                 strSelected = strSelected + "," + $(this).val();
20 
21             }
22 
23         }
24 
25         else {
26 
27             if ("" == strNoSlected) {
28 
29                 strNoSlected = $(this).val();
30 
31             }
32 
33             else {
34 
35                 strNoSlected = strNoSlected + "," + $(this).val();
36 
37             }
38 
39         }                   
40 
41     })
42 
43     alert("选中：" + strSelected + ";未选中：" + strNoSlected);
44 
45 });

2.3. 全选

1 $("#btnSelectedAll").bind("click", function () {
2 
3     $("[name='groupName']").attr({ "checked": "true" });
4 
5 });

2.4. 取消全选

1 $("#btnCancelAll").bind("click", function () {
2 
3     $("[name='groupName']").removeAttr("checked");
4 
5 });

2.5. 反选

 1 $("#btnInvertSelected").bind("click", function () {
 2 
 3     $("[name='groupName']").each(function () {
 4 
 5         if ($(this).is(':checked')) {
 6 
 7             $(this).removeAttr("checked");
 8 
 9         }
10 
11         else {
12 
13             $(this).attr("checked", true)
14 
15         }
16 
17     })
18 
19 });

2.6. jQuery获取或赋值Checkbox

jquery判断checked的三种方法

.attr('checked'): //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false

.prop('checked'): //16+:true/false

.is(':checked'): //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:

所有的jquery版本都可以这样赋值:

// $("#cb1").attr("checked","checked");

// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:

// $("#cb1").prop("checked",true);//很简单就不说了哦

// $("#cb1").prop({checked:true}); //map键值对

// $("#cb1").prop("checked",function(){

return true;//函数返回true或false

});

$("#cb1").prop("checked","checked");

2.7. 复选框点击事件（选中或取消）

1 $(document).ready(function () {
2 
3            $("#cb1").bind("change", function () {
4 
5             var isChecked = $(this).is(':checked');
6 
7             alert(isChecked);
8 
9         });

2.8. 完整事例

运行效果：

前端选择控件使用汇总(Checkbox、Radio、Select)

完整代码：

  1 <!DOCTYPE html>
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 
  5 <head>
  6 
  7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8 
  9     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
 10 
 11     <title></title>
 12 
 13     <script type="text/javascript">
 14 
 15         $(document).ready(function () {
 16 
 17             $("#btnSelected").bind("click", function () {
 18 
 19                 var isChecked = $("#chkSelected").is(':checked');
 20 
 21                 alert(isChecked);
 22 
 23             });
 24 
 25             $("#btnSetCheckbox1").bind("click", function () {
 26 
 27                 //$("#chkSelected").attr("checked", "checked");
 28 
 29                 //$("#chkSelected").attr("checked", true);
 30 
 31                 //$("#chkSelected").prop("checked", true);
 32 
 33                 //$("#chkSelected").prop({ checked: true });
 34 
 35  
 36 
 37                 //$("#chkSelected").prop("checked", function () {
 38 
 39                 //    return true;//函数返回true或false
 40 
 41                 //});
 42 
 43  
 44 
 45                 $("#chkSelected").prop("checked", "checked");
 46 
 47             });
 48 
 49             $("#btnSetCheckbox2").bind("click", function () {
 50 
 51                 $("#chkSelected").attr("checked", false);
 52 
 53             });
 54 
 55             $("#chkSelected").bind("change", function () {
 56 
 57                 var isChecked = $(this).is(':checked');
 58 
 59                 alert(isChecked);
 60 
 61             });
 62 
 63             //---------------
 64 
 65             $("#btnSelectedAll").bind("click", function () {
 66 
 67                 $("[name='groupName']").attr({ "checked": "true" });
 68 
 69             });
 70 
 71             $("#btnCancelAll").bind("click", function () {
 72 
 73                 $("[name='groupName']").removeAttr("checked");
 74 
 75             });
 76 
 77             $("#btnInvertSelected").bind("click", function () {
 78 
 79                 $("[name='groupName']").each(function () {
 80 
 81                     if ($(this).is(':checked')) {
 82 
 83                         $(this).removeAttr("checked");
 84 
 85                     }
 86 
 87                     else {
 88 
 89                         $(this).attr("checked", true)
 90 
 91                     }
 92 
 93                 })
 94 
 95             });
 96 
 97             $("#btnShowSelected").bind("click", function () {
 98 
 99                 //显示选中项与未选中项
100 
101                 var strSelected = "", strNoSlected = "";
102 
103                 $("[name='groupName']").each(function () {
104 
105                     if ($(this).is(':checked')) {
106 
107                         if ("" == strSelected) {
108 
109                             strSelected = $(this).val();
110 
111                         }
112 
113                         else {
114 
115                             strSelected = strSelected + "," + $(this).val();
116 
117                         }
118 
119                     }
120 
121                     else {
122 
123                         if ("" == strNoSlected) {
124 
125                             strNoSlected = $(this).val();
126 
127                         }
128 
129                         else {
130 
131                             strNoSlected = strNoSlected + "," + $(this).val();
132 
133                         }
134 
135                     }                   
136 
137                 })
138 
139                 alert("选中：" + strSelected + ";未选中：" + strNoSlected);
140 
141             });
142 
143         })
144 
145     </script>
146 
147 </head>
148 
149 <body>
150 
151     <div>HTML DOM Checkbox事例：<input id="chkSelected" type="checkbox" name="cType" value="1" />单个复选框</div>
152 
153     <br />
154 
155     <div>操作：<input type="button" id="btnSelected" value="判断是否选中" /><input type="button" id="btnSetCheckbox1" value="选中" /><input type="button" id="btnSetCheckbox2" value="取消" /></div>
156 
157     <hr />
158 
159     <div>操作一组复选框</div><br />
160 
161     <input type="checkbox" name="groupName" value="1" />苹果
162 
163     <input type="checkbox" name="groupName" value="2" />梨
164 
165     <input type="checkbox" name="groupName" value="3" />香蕉
166 
167     <input type="checkbox" name="groupName" value="4" />菠萝
168 
169     <input type="checkbox" name="groupName" value="5" />桃子
170 
171     <br />
172 
173     <div>
174 
175         操作：<input type="button" id="btnSelectedAll" value="全选" />
176 
177         <input type="button" id="btnCancelAll" value="取消全选" />
178 
179         <input type="button" id="btnInvertSelected" value="反选" />
180 
181         <input type="button" id="btnShowSelected" value="显示选择值" />
182 
183     </div>
184 
185 </body>
186 
187 </html>

3. HTML DOM Radio 对象

Radio对象代表 HTML 表单中的单选按钮；

3.1. 控件初始化

单个组件：

 1 <input id="chkSelected" type="checkbox" name="cType" value="1" />一组组件：
 2 
 3     <input type="checkbox" name="groupName" value="1" />苹果
 4 
 5     <input type="checkbox" name="groupName" value="2" />梨
 6 
 7     <input type="checkbox" name="groupName" value="3" />香蕉
 8 
 9     <input type="checkbox" name="groupName" value="4" />菠萝
10 
11     <input type="checkbox" name="groupName" value="5" />桃子

3.2. 显示选择项

1 $("#btnShowRadioSelected").bind("click", function () {
2 
3     var strSelected = $("input:radio[name='sex']").val();
4 
5     alert("已选择：" + strSelected);
6 
7 });

3.3. 监听切换事件

1 $("input:radio[name='sex']").change(function () {
2 
3     alert("您点击了：" + $(this).val());
4 
5 });

3.4. 设置选中项

 1 $("#btnSetRadioSelected1").bind("click", function () {
 2 
 3     $("input:radio[name='sex']").eq(0).attr("checked", true);
 4 
 5 });
 6 
 7 $("#btnSetRadioSelected2").bind("click", function () {
 8 
 9     $("input:radio[name='sex']").eq(1).attr("checked", true);
10 
11 });

3.5. 设置某组可用状态

 1 $("#btnSwitchSexRadioDisabled").bind("click", function () {
 2 
 3     if ("disabled" == $("input:radio[name='sex']").attr("disabled")) {
 4 
 5         $("input:radio[name='sex']").removeAttr("disabled");
 6 
 7         //或者：$("input:radio[name='sex']").removeAttr("disabled");
 8 
 9     }
10 
11     else {
12 
13         $("input:radio[name='sex']").attr("disabled", "disabled");
14 
15     }
16 
17 });

3.6. 设置全部Radio可用状态

 1 $("#btnSwitchAllRadioDisabled").bind("click", function () {
 2 
 3     if ("disabled" == $("input:radio").attr("disabled")) {
 4 
 5         $("input:radio").attr("disabled", false);
 6 
 7         //或者：$("input:radio").removeAttr("disabled");
 8 
 9     }
10 
11     else {
12 
13         $("input:radio").attr("disabled", "disabled");
14 
15     }
16 
17 });

3.7. 事例

运行效果：

前端选择控件使用汇总(Checkbox、Radio、Select)

源代码：

HTML部分：

 1 <div>
 2 
 3     HTML DOM Radio事例：
 4 
 5     <input type="radio" name="sex" value="男" checked="checked">男
 6 
 7     <input type="radio" name="sex" value="女">女
 8 
 9     <input type="radio" name="age" value="2">年龄
10 
11     <br />
12 
13     <div>
14 
15         操作：<input type="button" id="btnShowRadioSelected" value="显示选择项" />
16 
17         <input type="button" id="btnSetRadioSelected1" value="设置为男" />
18 
19         <input type="button" id="btnSetRadioSelected2" value="设置为女" />
20 
21         <input type="button" id="btnSwitchSexRadioDisabled" value="切换性别选择可用状态" />
22 
23         <input type="button" id="btnSwitchAllRadioDisabled" value="切换页面所有Radio可用状态" />
24 
25     </div>
26 
27 </div>

Javascript部分：

 1 //-------------------------Radio控件---------------------------
 2 
 3 $("input:radio[name='sex']").change(function () {
 4 
 5     alert("您点击了：" + $(this).val());
 6 
 7 });
 8 
 9 $("#btnShowRadioSelected").bind("click", function () {
10 
11     var strSelected = $("input:radio[name='sex']").val();
12 
13     alert("已选择：" + strSelected);
14 
15 });
16 
17 $("#btnSetRadioSelected1").bind("click", function () {
18 
19     $("input:radio[name='sex']").eq(0).attr("checked", true);
20 
21 });
22 
23 $("#btnSetRadioSelected2").bind("click", function () {
24 
25     $("input:radio[name='sex']").eq(1).attr("checked", true);
26 
27 });
28 
29 $("#btnSwitchSexRadioDisabled").bind("click", function () {
30 
31     if ("disabled" == $("input:radio[name='sex']").attr("disabled")) {
32 
33         $("input:radio[name='sex']").removeAttr("disabled");
34 
35         //或者：$("input:radio[name='sex']").removeAttr("disabled");
36 
37     }
38 
39     else {
40 
41         $("input:radio[name='sex']").attr("disabled", "disabled");
42 
43     }
44 
45 });
46 
47 $("#btnSwitchAllRadioDisabled").bind("click", function () {
48 
49     if ("disabled" == $("input:radio").attr("disabled")) {
50 
51         $("input:radio").attr("disabled", false);
52 
53         //或者：$("input:radio").removeAttr("disabled");
54 
55     }
56 
57     else {
58 
59         $("input:radio").attr("disabled", "disabled");
60 
61     }
62 
63 });

4. HTML DOM Select对象

4.1. 控件初始化

 1 <select id="selectDemo">
 2 
 3         <option value="1">选择1</option>
 4 
 5         <option value="2">选择2</option>
 6 
 7         <option value="3">选择3</option>
 8 
 9         <option value="4">选择4</option>
10 
11     </select>

4.2. 事例

 1 <div>
 2 
 3     HTML DOM Select事例：
 4 
 5     <select id="selectDemo">
 6 
 7         <option value="1">选择1</option>
 8 
 9         <option value="2">选择2</option>
10 
11         <option value="3">选择3</option>
12 
13         <option value="4">选择4</option>
14 
15     </select>
16 
17     <br /><br /><br /><br />
18 
19     <div>
20 
21         操作：<input type="button" id="btnShowSelectSelected" value="显示选中项值" />
22 
23         <input type="button" id="btnSetSelectSelected2" value="根据index设置选中'选择2'" />
24 
25         <input type="button" id="btnSetSelectSelected3" value="根据text设置选中'选择3'" />
26 
27         <input type="button" id="btnSetSelectSelected4" value="根据value设置选中'选择4'" />
28 
29         <input type="button" id="btnAddItemSelect" value="尾部追加1项" />
30 
31         <input type="button" id="btnAddItemSelectHead" value="头部追加1项" />
32 
33         <input type="button" id="btnRemoveLastOptionSelect" value="移除尾部最后1项" />
34 
35         <input type="button" id="btnRemoveOptionByIndex" value="移除Index等于1（选择2）的项" />
36 
37         <input type="button" id="btnRemoveOptionByValue" value="移除value等于3的项" />
38 
39         <input type="button" id="btnRemoveOptionByText" value="移除Text等于'选择4'的项" />
40 
41     </div>
42 
43 </div>

Javascript部分：

  1 //-------------------------Select控件---------------------------
  2 
  3 $("#btnShowSelectSelected").bind("click", function () {
  4 
  5     var selectDemo = $("#selectDemo");
  6 
  7     var strReturn = "";//返回值
  8 
  9     //获取下拉框选中项的text属性值
 10 
 11     var selectText = selectDemo.find("option:selected").text();
 12 
 13     strReturn = "Text值：" + selectText;
 14 
 15     //获取下拉框选中项的value属性值
 16 
 17     var selectValue = selectDemo.val();
 18 
 19     strReturn = strReturn + ";Value值：" + selectValue;
 20 
 21     //获取下拉框选中项的index属性值
 22 
 23     var selectIndex = selectDemo.get(0).selectedIndex;
 24 
 25     strReturn = strReturn + ";Index值：" + selectIndex;
 26 
 27     ////获取下拉框最大的index属性值
 28 
 29     var selectMaxIndex = $("#selectDemo option:last").get(0).index;
 30 
 31     strReturn = strReturn + ";最大Index值：" + selectMaxIndex;
 32 
 33     alert(strReturn);
 34 
 35 });
 36 
 37 $("#btnSetSelectSelected2").bind("click", function () {
 38 
 39     //设置下拉框index属性对应值的选项 选中
 40 
 41     $("#selectDemo").get(0).selectedIndex = 1;
 42 
 43  
 44 
 45 });
 46 
 47 $("#btnSetSelectSelected3").bind("click", function () {
 48 
 49     //设置下拉框text属性为'选择3'的选项 选中
 50 
 51     $("#selectDemo option:contains('选择3')").attr("selected", true);
 52 
 53 });
 54 
 55 $("#btnSetSelectSelected4").bind("click", function () {
 56 
 57     //设置下拉框value属性对应值的选项 选中
 58 
 59     $("#selectDemo").val(4);
 60 
 61 });
 62 
 63 $("#btnAddItemSelect").bind("click", function () {
 64 
 65     var len = $("#selectDemo option").size() + 1;
 66 
 67     $("#selectDemo").append("<option value='" + len + "'>选择" + len + "</option>");
 68 
 69 });
 70 
 71 $("#btnAddItemSelectHead").bind("click", function () {
 72 
 73     var firstOptionValue = $("#selectDemo option:first").val() - 1;
 74 
 75     $("#selectDemo").prepend("<option value='" + firstOptionValue + "'>选择" + firstOptionValue + "</option>");
 76 
 77     //设置选中第1项
 78 
 79     $("#selectDemo").val(firstOptionValue);
 80 
 81 });
 82 
 83 $("#btnRemoveLastOptionSelect").bind("click", function () {
 84 
 85     $("#selectDemo option:last").remove();
 86 
 87 });
 88 
 89 $("#btnRemoveOptionByIndex").bind("click", function () {
 90 
 91     $("#selectDemo option[index=1]").remove();
 92 
 93 });
 94 
 95 $("#btnRemoveOptionByValue").bind("click", function () {
 96 
 97     $("#selectDemo option[value=3]").remove();
 98 
 99 });
100 
101 $("#btnRemoveOptionByText").bind("click", function () {
102 
103     $("#selectDemo option:contains('选择4')").remove();
104 
105 });

关注GIS行业发展,关注智慧城市建设,GIS应用开发学院

秒客网

前端选择控件使用汇总(Checkbox、Radio、Select)

相关文章