复选框全选与全不选操作实现思路

代码如下:

<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>
<html>
<head>
<title>复选框处理.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<input type="checkbox" id="checkItem">全选/全不选
<br>
<h3>爱好</h3>
<input type="checkbox" name="item">看书
<br>
<input type="checkbox" name="item">听音乐
<br>
<input type="checkbox" name="item">打球
<br>
<input type="checkbox" name="item">散步
<br>
<input type="checkbox" name="item">写代码
<br>
<script>
window.onload = function(){
var checkItem = document.getElementById("checkItem").onclick = function(){
var itemsElement = document.getElementsByName("item");
for (var i = 0; i < itemsElement.length; i++) {
var itemElement = itemsElement[i];
if (this.checked) {
itemElement.checked = "checked";
}
else {
itemElement.checked = null;
}
}
}
}
</script>
</body>
</html>
</SPAN>

赞 (0)

相关推荐

  • 方便实用的jQuery checkbox复选框全选功能简单实例

    复制代码 代码如下: // 主复选框<input type="checkbox" id="ck" name="ckAll">// 子复选框项<input type="checkbox" id="ck1" name="ckItm"><input type="checkbox" id="ck2" name="ck

  • 实现复选框全选/全不选切换

    <input type=checkbox name=mm value=a onclick="checkItem(this, 'mmAll')"><br> <input type=checkbox name=mm value=b onclick="checkItem(this, 'mmAll')"><br> <input type=checkbox name=mm value=c onclick="che

  • jquery复选框全选/取消示例

    功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 复制代码 代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){     if($("#" +

  • layui table复选框禁止某几条勾选的实例

    Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+

  • 用Javscript实现表单复选框的全选功能

    一个比较常见的全选功能,前天在弄后台的时候有看到,整理了一下.具体: //说明:form1为表单名,mId为复选框,selectbutton为全选按钮  <script language="javascript">     function selectAll()      {  for (var i=0;i<document.form1.mId.length;i++) {  var temp=document.form1.mId[i];  temp.checked=

  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • 利用Bootstrap实现表格复选框checkbox全选

    利用Bootstrap实现表格复选框checkbox全选

    首先来看看实现的效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>类别编号</th> <th>类别名称</th> <th>类别组</th> <th

  • JavaScript实现复选框全选和取消全选

    JS网页–全选和取消全选,供大家参考,具体内容如下 表格,初始状态下复选框都是未选中状态,选中表头的复选框后,下面几个复选框变为选中状态,取消表头复选框选中状态后,下面几个复选框选中状态也随之取消:下面的几个复选框同时选中时,表头的复选框也随之选中. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="

  • jQuery实现简单全选框

    本文实例为大家分享了jQuery实现简单全选框的具体代码,供大家参考,具体内容如下 1.要求: (1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他 复选框全部取消选中 (2)当复选框有取消选中时,全选框也要取消勾选 2.HTML部分 <table id="table"> <thead><tr><th colspan="6">学生信息表</th></tr></thead>

  • vue基于element-ui的三级CheckBox复选框功能的实现代码

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,下面通过本文给大家讲解实现方法. 效果图预览: 首先是页面布局,当然也可已使用table,但是自己用flex布局后面更容易增删改查其他功能 <div class="deliverySetting-table"> <div class="table-head"> <div clas

  • JavaScript限定复选框的选择个数示例代码

    有10个复选框,用户最多只能勾选3个,否则就灰掉所有复选框. (用户再次勾掉复选框时,仍然可以再次选择.) 将可变的部分设置为JS的参数,以实现代码复用. JS代码 第一个参数为复选框的name,第二个参数为最多允许的勾选值. 复制代码 代码如下: function choicetest(name,num){ var choicearr = document.getElementsByName(name); var a=0; for(var i=0;i<choicearr.length;i++)

  • 关于Python Tkinter 复选框 -＞Checkbutton

    关于Python Tkinter 复选框 -＞Checkbutton

     正文如下: import tkinter as tk windows = tk.Tk() windows.title('复选框') lab = tk.Label(windows, text='请选择你喜欢做的事', fg='blue', bg='lightblue', width=35) lab.grid(row=0, pady=2) var_b = tk.IntVar() print(var_b.get()) check_button_b = tk.Checkbutton(windows,

  • JavaScript模拟文件拖选框样式v1.0的实例

    JavaScript模拟文件拖选框样式v1.0的实例

    文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" 实现效果 页面布局 实现思路 拖选框 css样式中设置拖选框样式,注意设置position: absolute;漂浮状态. 监听p#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加p#selectBox. 鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为p#selectBox添加坐标top/left 和尺寸width/height. 鼠标

随机推荐