javascript 设置某DIV区域内的checkbox复选框

<!--HTML代码片段如下： -->


代码如下:

<div id="div1">
<input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
</div>
<br/>
<div id="div2">
<input type="checkbox" onclick="selectCheckBoxes('div2', this.checked)" />全选<br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
</div>

<!--js代码片段如下： -->


代码如下:

<script type="text/javascript">
function selectCheckBoxes(domId,value) {
var inputs = document.getElementById(domId).getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked=value;
}
}
}
</script>

将以上代码放到body里即可。

赞 (0)

相关推荐

  • js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>

  • 如何判断鼠标是否在DIV的区域内

    今天研究了一下这个问题,也普及了一下知识吧. 方法一: 通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域. 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道. 复制代码 代码如下: function chkIn()    {  div_1.innerText = "现在你把鼠标移入层了!";  div_1.style.font = "normal black"; }   funct

  • 使用jQuery判断Div是否在可视区域的方法 判断div是否可见

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-

  • jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||

  • window.print打印指定div指定网页指定区域的方法

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript:

  • DIV外区域Click后关闭DIV的实现代码

    阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); 复制代码 代码如下: <style> body { background:black; } #myDiv { background: #fff; width:250px; height:250px; display:none; } </style> &

  • jquery使整个div区域可以点击的方法

    本文实例讲述了jquery使整个div区域可以点击的方法.分享给大家供大家参考.具体分析如下: 这里实现可以让用户点击整个div区域,这段代码会自动查找div里的链接 $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); Reference HTML: <div class="myBox&quo

  • javascript 设置某DIV区域内的checkbox复选框

    <!--HTML代码片段如下: --> 复制代码 代码如下: <div id="div1"> <input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/> <input type="checkbox" /><br/> <input type=&quo

  • javascript动态添加checkbox复选框的方法

    本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

  • JavaScript 通过Ajax 动态加载CheckBox复选框

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • javascript获取checkbox复选框获取选中的选项

    有关javascript 获取checkbox复选框的实例数不胜数,下面的这个示例,纯js实现的 var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; for (var i = 0, len = opt

  • 基于javascript实现checkbox复选框实例代码

    基于javascript实现checkbox复选框实例代码

    本文实例讲解了javascript实现checkbox复选框的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascr

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • JS实现CheckBox复选框全选全不选功能

    CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

  • ASP.NET中 CheckBox复选框控件的使用

    ASP.NET中 CheckBox复选框控件的使用

    我们可以使用两种类型的 ASP.NET 控件将复选框添加到 Web 窗体页上:单独的 CheckBox 控件或 CheckBoxList 控件.两种控件都为用户提供了一种输入布尔型数据(真或假.是或否)的方法. 这里我们单独使用CheckBox,先来看看它的属性 属性 描述 .NET AutoPostBack 规定在 Checked 属性已改变后,是否立即向服务器回传表单.默认是 false. 1.0 CausesValidation 规定点击 Button 控件时是否执行验证. 2.0 Che

随机推荐