程序一:(全选)
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 onclick="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" onclick="change(document.getElementsByName('check'), this.checked)" /></td>
42 </tr>
43 <tr>
44 <td>全选学生
45 <input name="nocheckall" type="checkbox" id="nocheckall" value="checkbox" onclick="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" onclick="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" onclick="selectV(this);">A、北京<br>
34 <input type="checkbox" value="B" onclick="selectV(this);">B、东京<br>
35 <input type="checkbox" value="C" onclick="selectV(this);">C、纽约<br>
36 <input type="checkbox" value="D" onclick="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" onclick="selectV(this);">A、黑色<br>
45 <input type="checkbox" value="B" onclick="selectV(this);">B、白色<br>
46 <input type="checkbox" value="C" onclick="selectV(this);">C、红色<br>
47 <input type="checkbox" value="D" onclick="selectV(this);">D、蓝色
48 </td>
49 </tr>
50 </table></body>
51 </html>
52
分享到:
相关推荐
树结构 复选框 多选 全选功能
用Axure RP 8.0做的原型设计列子,作用是复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。
c# datagirdview列头增加复选框列多选C#增加全选列程序从别人那找来
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
pyqt5 QTableWidget/QTableView表头复选框源码
复选框的全选和反选复选框的全选和反选复选框的全选和反选
js 实现 复选框全选(一)! 值得下载看看!资源免费,大家分享!!
实现table表格checkbox复选框的全选 反选.
bootstrap select复选框,可单选,多选,全选,带索引功能
复选框 实现 单选 多选 全选的功能
带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选 通过子节点控制父节点及以上父节点是否要选中
Bootstrap相信应该不用多...这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果,文中给出详细的介绍及完整的实例代码,相信对大家的理解和学习具有一定的参考借鉴价值,下面来一起看看吧。
引用DLL就可以应用带复选框的下拉表 里面包含源码
NULL 博文链接:https://heisetoufa.iteye.com/blog/356077
利用Wincc复选框控件,通过VBS脚本,通过复选框选项,实现数据批量选择、传送。涉及到Wincc复选框控件,VBS脚本编写,附带VBS脚本。
介绍了jtable中加入复选的难点的俩个例子,方便大家更好的学习.
纯angularjs实现的checkbox多选、全选、反选的例子,不依赖源数据,不会对源数据造成任何污染。
今天小编就为大家分享一篇layui复选框的全选与取消实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
tkinter自定义多选下拉列表框(带滚动条,全选)
最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现。 效果是这样: 因为是内部用,样式也不要求太好看,直接上代码。 示例代码: <!DOCTYPE ...