复选框全选（多选）

最新推荐文章于 2022-09-05 17:31:10 发布

qxmcool

最新推荐文章于 2022-09-05 17:31:10 发布

阅读量821

点赞数 1

分类专栏： javascript 文章标签：影视体育音乐旅游 C

本文链接：https://blog.csdn.net/qxmcool/article/details/83392369

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

程序一：(全选)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>标题页</title>
4 <SCRIPT LANGUAGE="JavaScript">
5 function checkAll(str)
6 {
7 var a = document.getElementsByName(str); //获取所有复选框
8 var n = a.length; //获取复选框的个数
9 for (var i=0; i<n; i++)
10 a[i].checked = window.event.srcElement.checked;//通过单击的按钮判断是选中还是未选
11 }
12 </script>
13 </head>
14 <body>
15 <input type=checkbox name=All οnclick="checkAll('ck')"/>全选<br>
16 <input type=checkbox name=ck />体育<br>
17 <input type=checkbox name=ck />旅游<br>
18 <input type=checkbox name=ck />饮食<br>
19 <input type=checkbox name=ck />影视<br>
20 <input type=checkbox name=ck />音乐<br><br></body>
21 </html>
22 程序二：(全选)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>标题页</title>
4 </head>
5 <body>
6 <form id="form1" name="form1" method="post" action="">
7 <table width="120" border="0">
8 <tr>
9 <td>教师组/学生组</td>
10 </tr>
11 <tr>
12 <td><input name="check" type="checkbox" id="check" value="yes" />
13 <input name="nocheck" type="checkbox" id="nocheck" value="no" /></td>
14 </tr>
15 <tr>
16 <td><input name="check" type="checkbox" id="Checkbox1" value="yes" />
17 <input name="nocheck" type="checkbox" id="Checkbox2" value="no" /></td>
18 </tr>
19 <tr>
20 <td><input name="check" type="checkbox" id="Checkbox3" value="yes" />
21 <input name="nocheck" type="checkbox" id="Checkbox4" value="no" /></td>
22 </tr>
23 <tr>
24 <td><input name="check" type="checkbox" id="Checkbox5" value="yes" />
25 <input name="nocheck" type="checkbox" id="Checkbox6" value="no" /></td>
26 </tr>
27 <tr>
28 <td><input name="check" type="checkbox" id="Checkbox7" value="yes" />
29 <input name="nocheck" type="checkbox" id="Checkbox8" value="no" /></td>
30 </tr>
31 <tr>
32 <td><input name="check" type="checkbox" id="Checkbox9" value="yes" />
33 <input name="nocheck" type="checkbox" id="Checkbox10" value="no" /></td>
34 </tr>
35 <tr>
36 <td><input name="check" type="checkbox" id="Checkbox11" value="yes" />
37 <input name="nocheck" type="checkbox" id="Checkbox12" value="no" /></td>
38 </tr>
39 <tr>
40 <td>全选教师
41 <input name="checkall" type="checkbox" id="checkall" value="checkbox" οnclick="change(document.getElementsByName('check'), this.checked)" /></td>
42 </tr>
43 <tr>
44 <td>全选学生
45 <input name="nocheckall" type="checkbox" id="nocheckall" value="checkbox" οnclick="change(document.getElementsByName('nocheck'), this.checked)" /></td>
46 </tr>
47 </table>
48 </form>
49 <script type="text/javascript">
50 var change = function (chkArray, val)
51 {
52 for (var i = 0 ; i < chkArray.length ; i ++) //遍历指定组中的所有项
53 chkArray[i].checked = val; //设置项为指定的值-是否选中
54 }
55 </script>
56 </body>
57 </html>
58 程序三：(全选)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>全选</title>
4 <script type="text/javascript">
5 function SelectAll()
6 {
7 oEl = event.srcElement; //获取当前单击的元素
8 for(i = 0;i < document.all.length; i++)
9 {
10 // 遍历所有的checkbox
11 if(document.all(i).id.indexOf("Checkbox") != -1)
12 {
13 if(oEl.checked) //如果选择了全选
14 document.all(i).checked = true; //全选
15 else
16 document.all(i).checked = false; //全不选
17 }
18 }
19 }
20 </script>
21 </head>
22 <body>
23
24 <input id="Checkbox1" type="checkbox" value="a" /><label >争取举办奥运会的城市</label><br />
25 <input id="Checkbox2" type="checkbox" value="b"/><label >举办过奥运会的城市</label><br />
26 <input id="Checkbox3" type="checkbox"value="c" /><label >成功举办奥运会的城市</label><br />
27 <input id="Checkbox4" type="checkbox" value="d" /><label >亚洲举办过奥运会的城市</label><br />
28 <input id="Checkbox5" type="checkbox" οnclick="SelectAll()"/>全选或全不选
29 </body>
30 </html>程序四：(多选)
1 <html xmlns="http://www.w3.org/1999/xhtml" >
2 <head>
3 <title>标题页</title>
4 <Script Language="javascript">
5 function selectV(obj)
6 {
7 try{
8 var oTd = obj.parentElement; //获取表格的列
9 var oTr = oTd.parentElement; //获取表格的行
10 var oTable = oTr.parentElement; //获取表格
11 var oTd_Answer = oTable.rows[oTr.rowIndex-1].cells[0].innerText; //获取问题答案所在的单元格内容
12 var oBegin = oTd_Answer.indexOf("（") + 1; //获取（所在的位置
13 var str = '';
14 for(var i=0;i<oTd.children.length;i++){ //遍历问题选项
15 if(oTd.children[i].tagName=='INPUT' && oTd.children[i].checked){//如果选中
16 str += oTd.children[i].value; //输出value值
17 }
18 } //输出结束符号）
19 oTable.rows[oTr.rowIndex-1].cells[0].innerText = oTd_Answer.substring(0,oBegin) + str + '）';
20 }catch(error){
21 window.alert(error.description); //显示错误信息
22 }
23 }
24 </Script>
25 </head>
26 <body>
27 <table>
28 <tr>
29 <td>1.你喜欢的国家（）</td>
30 </tr>
31 <tr>
32 <td>
33 <input type="checkbox" value="A" οnclick="selectV(this);">A、北京<br>
34 <input type="checkbox" value="B" οnclick="selectV(this);">B、东京<br>
35 <input type="checkbox" value="C" οnclick="selectV(this);">C、纽约<br>
36 <input type="checkbox" value="D" οnclick="selectV(this);">D、韩国
37 </td>
38 </tr>
39 <tr>
40 <td>2.你喜欢的颜色（）</td>
41 </tr>
42 <tr>
43 <td>
44 <input type="checkbox" value="A" οnclick="selectV(this);">A、黑色<br>
45 <input type="checkbox" value="B" οnclick="selectV(this);">B、白色<br>
46 <input type="checkbox" value="C" οnclick="selectV(this);">C、红色<br>
47 <input type="checkbox" value="D" οnclick="selectV(this);">D、蓝色
48 </td>
49 </tr>
50 </table></body>
51 </html>
52

qxmcool

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复选框全选（多选）

程序一：(全选) 1 2 3 标题页 4 5 function checkAll(str) 6 { 7 var a = document.getElementsByName(str); //获取所有复选框 8 var n = a.length; //获取复选框的个数 9 fo...
复制链接

扫一扫