checkebox 全选，子复选框单个全部选择后，全选框也会被选择(js动态创建的input)

末蓝、 2021-09-15 12:34 152阅读 0赞

html

<div><ul id="shops"></ul></div>

js

var string = '<li><input id="allShops"  value="" type="checkbox" οnclick="queryAll(this)"><span>全部商铺</span></li>';
                list.forEach(function (ele) {
                    string += '<li><input  value="' + ele.id + '" type="checkbox"><span>' + ele.name + '</span></li>'
                })
                $('#shops').append(string) //动态创建input选择框

//全选,取消
    function queryAll(dom) {
        if ($(dom).is(":checked") == true) {
          $("#shops").find('input').prop("checked", true);//全选
        } else {
          $("#shops").find('input').prop("checked", false);//取消
        }
    }
    document.querySelector('#shops').addEventListener('click', function (e) {
        console.log(e.target.tagName)
        if (e.target.tagName=='INPUT'&&$(e.target).is(':checked') == false) {//如果有一个取消,全选按钮取消
            $('#allShops').prop('checked', false);
        }
        var choiceSelect=$('#shops').find('input').not('#allShops').length;
        var choiceLength=$('#shops').find('input:checked').not('#allShops').length;
        if(choiceSelect==choiceLength){//所有按钮被选中,全选按钮选中
            $('#allShops').prop('checked', true);
        }
    })

![20180531141655334][]

[20180531141655334]: /images/20210726/229217fec26a46fb921f81bb3a67c11c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery之子复选框全部选中则全选框选中

我为大家提供了六种方法供大家参考 $(".usertable td input[type='checkbox']").change(function (

客官°小女子只卖身不卖艺/ 2022年09月26日 11:52/ 0 赞/ 241 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 242 阅读

相关 js_案例_复选框全选功能

复选框全选功能 <label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label>

ゝ一世哀愁。/ 2022年05月25日 05:47/ 0 赞/ 217 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 409 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 274 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 269 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 323 阅读

相关原生js实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和

小鱼儿/ 2022年04月06日 07:56/ 0 赞/ 431 阅读

相关 js之全选即点击全选标签可选择全部复选框

目标效果：网页全选功能，即点击全选标签可选择全部复选框实现代码如下 <!DOCTYPE html> <html lang="en"> <head>

野性酷女/ 2022年01月07日 04:51/ 0 赞/ 355 阅读

相关 checkebox 全选，子复选框单个全部选择后，全选框也会被选择(js动态创建的input)

html <div><ul id="shops"></ul></div> js var string = '<li><input id="allShops

末蓝、/ 2021年09月15日 12:34/ 0 赞/ 153 阅读