`

javascript设置某DIV下复选框checkbox

阅读更多
主要用到dom的两个函数document.getElementById(id)和document.getElementsByTagName(name),希望对写复选框全选的虾们有些许帮助。

<!--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
0
分享到:
评论

相关推荐

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

    当页面上有多个div区域,每个区域中又包含若干复选框时,如果要控制每个区域内复选框的选中状态,就可以利用JavaScript的DOM操作函数。 文档中提到的两个核心函数是document.getElementById(id)和document....

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...

    jquery点击输入框时弹出div层复选框勾选输入的内容

    本示例涉及的是一个基于jQuery实现的功能:当用户点击输入框时,会弹出一个包含复选框的div层,用户选择复选框后,所选复选框的值会自动填充到输入框内。这个功能对于创建交互式的用户界面非常有用,尤其适用于需要...

    使用div实现的复选选择控件

    在HTML中,`&lt;input type="checkbox"&gt;`是用于创建复选框的元素,但若要实现更高级的交互效果,如动态添加、删除选项,或者显示选定项目的列表,我们需要借助JavaScript。 在这个案例中,我们可以创建一个包含多个`...

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

    ### JavaScript 动态添加 Checkbox 复选框的方法 在网页开发过程中,经常需要根据用户的行为或数据变化来动态地创建和更新表单元素。其中,复选框(Checkbox)是一种非常常见的表单元素,用于表示多选一或多选多的...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中,我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框,包括权限范围的多选、单选以及全选操作。同时,我们也将关注于父级和子级复选框之间的联动关系,即父级选中时子级全部选中,而...

    简单复选框样式

    一种常见的方式是使用CSS伪类和隐藏原生复选框,再用一个自定义的图形元素(如`&lt;div&gt;`或`&lt;span&gt;`)来模拟复选框的视觉效果。例如: ```html &lt;input type="checkbox" id="customCheckbox" hidden&gt; ...

    jquery模拟div多选checkbox下拉框

    本项目名为“jquery模拟div多选checkbox下拉框”,其核心目标是使用jQuery来实现一个功能丰富的多选下拉框替代传统的HTML `&lt;select&gt;` 元素,通过使用`&lt;div&gt;`元素和复选框(checkbox)来提供更自定义化的用户体验。...

    dtree和dtree_checkbox(dtree复选框)

    dtree_checkbox是dtree的一个增强版本,它引入了复选框功能,使得用户可以选择一个或多个节点。这一特性在需要多选操作的场景下非常实用,例如在文件管理器中选择多个文件进行操作。dtree_checkbox的主要特点包括: ...

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

    在JavaScript中,获取复选框(checkbox)选中的选项是一项常见的任务,特别是在处理表单数据时。本示例提供了一种纯JavaScript实现的方法,用于获取指定表单内复选框选中的值。以下是对该方法的详细解释: 首先,...

    jQuery弹出框checkbox复选框多选代码.zip

    在给定的压缩包"jQuery弹出框checkbox复选框多选代码.zip"中,我们可以看到两个核心文件:`index.html`和`jquery-1.9.1.min.js`。这些文件共同构成了一个简单的jQuery应用,用于实现弹出框内的多选复选框功能。 ...

    bootstrap非常实用的复选框

    在Bootstrap中,我们通常会用到的复选框是`&lt;input&gt;`元素,其类型设置为`checkbox`。例如: ```html &lt;div class="form-check"&gt; &lt;input class="form-check-input" type="checkbox" id="exampleCheckbox1" value=...

    下拉列表带复选框实现复选功能

    其次,为了实现下拉列表的展开与复选功能,我们可以利用CSS控制`&lt;select&gt;`元素的样式,将其转变为一个看起来像下拉列表的div,然后用JavaScript或jQuery来处理点击事件,动态显示/隐藏复选框列表。这种方法需要对...

    多选复选框

    在HTML中,多选复选框是通过`&lt;input&gt;`标签来实现的,其type属性设置为"checkbox"。例如: ```html &lt;input type="checkbox" id="option1" name="options" value="Option1"&gt; Option1 &lt;input type="checkbox" ...

    vue实现多种复选框,含搜索

    在Vue中,复选框通常使用`&lt;input type="checkbox"&gt;`标签来创建。我们可以利用Vue的v-model指令双向绑定数据,使得复选框的状态与Vue实例的数据同步。例如,我们有一个`items`数组,每个元素代表一个可选项目: ```...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    在模板中使用`&lt;van-checkbox&gt;`组件来渲染每个商品的复选框。商品的其他信息如名称、图片、价格、数量等也一并展示。 ```html (item, index) in shoppingListData.rows" :key="index"&gt; &lt;van-checkbox :value=...

    带有复选框的下拉列表

    首先,我们来探讨第一种实现方式——使用DIV控制的带有复选框的下拉列表。这种方式主要基于HTML和CSS,通过创建一个看起来像下拉列表的结构来模拟该功能。HTML部分会包含一组包裹在`&lt;div&gt;`标签中的`&lt;input type="...

    图片列表_复选框浮动选中

    每个图片元素应该有一个与之关联的复选框,但默认情况下是隐藏的。例如: ```html &lt;div class="image-container"&gt; 图片1"&gt; &lt;input type="checkbox" id="img1" hidden&gt; &lt;/div&gt; &lt;div class="image-container"&gt; ...

    复选框插件

    这可以通过CSS实现,覆盖原生复选框的样式,或者使用自定义的HTML结构(如`&lt;div&gt;`和`&lt;span&gt;`)和CSS伪元素来模拟复选框。例如: ```css /* 隐藏原生复选框 */ input[type="checkbox"] { display: none; } /* 创建...

Global site tag (gtag.js) - Google Analytics