Javascript是否选中所有自定义复选框？

我尝试了这个脚本，创建了一个带有name参数的自定义复选框

    function customCheckbox(checkboxName){
    var checkBox = $('input[name="'+ checkboxName +'"]');
    $(checkBox).each(function(){
        $(this).wrap( "<span class='custom-checkbox'></span>" );
        if($(this).is(':checked')){
            $(this).parent().addClass("selected");
        }
    });
    $(checkBox).click(function(){
        $(this).parent().toggleClass("selected");
    });
}
$(document).ready(function (){
    customCheckbox("name1");
    customCheckbox("name2");

})

只有默认复选框成功。我的自定义复选框不起作用。 请帮忙修理

简单html

    <label><input type='checkbox' id='checkAll' name='name1' class='selectall' /></label>

    <label><input type="checkbox" name="name2" value="1" /> 1</label>
    <label><input type="checkbox" name="name2" value="2" /> 2</label>
    <label><input type="checkbox" name="name2" value="3" /> 3</label>

    <label><input type="checkbox" name="" value="4" /> 4</label>
    <label><input type="checkbox" name="" value="5" /> 5</label>

试试这个

---

我将所选的类添加到span中，以便选中自定义复选框

我为自己编写了一些代码，似乎很适合这个问题。这里是我创建的工作JSFIDLE的链接

这将涉及重做复选框，但它可能会更好地为您服务。这里是一个代码演示

window.onload=函数{ var checkbox=document.getElementsByClassName'checkbox'； 对于变量i=0；i！=复选框。长度；i++{ 如果复选框[i].hasAttribute'name'==false{ 复选框[i].setAttribute'name'，'notChecked'； }否则{ 如果复选框[i].getAttribute'name'='checked'{ 复选框[i].setAttribute'name'，'checked'； 复选框[i]。子项[0]。类名='checkboxDotActive'； } } 复选框[i]。onclick=函数{ 如果此.getAttribute'name'=='checked'{ this.setAttribute'name'，'notChecked'； this.children[0]。className='checkboxDot'； }否则{ this.setAttribute'name'，'checked'； this.children[0].className='checkboxDotActive'； } }; } }; /* *请注意，“checkboxDot”DIV必须位于任何其他内部标记之前。 *它必须紧跟在父DIV之后！否则就不行了！！！ * *感谢您对这段代码表现出兴趣！ */ /*重要款式。。。后面的样式与复选框没有直接关系*/ .复选框{ 背景色：eee； 边界半径：3px； 填充物：5px； 显示：表格； } .复选框输入{ 大纲：无； 边界：0； 背景色：透明； 显示：内联块； 垂直对齐：中间对齐； } .checkbox.checkboxDot{ 背景色：透明； 边框：1px000； 显示：内联块； 垂直对齐：中间对齐； 宽度：16px； 高度：16px； 边界半径：50%； -o型过渡：全部。5秒轻松； -moz过渡：全部5秒轻松； -webkit过渡：全部。5s轻松； -ms过渡：全部5秒轻松； 过渡：所有。5s轻松； } .checkbox.checkboxDotActive{ 背景色：01A1DB； 边框：1px实心透明； 显示：内联块； 垂直对齐：中间对齐； 宽度：16px； 高度：16px； 边界半径：50%； -o型过渡：全部。5秒轻松； -moz过渡：全部5秒轻松； -webkit过渡：全部。5s轻松； -ms过渡：全部5秒轻松； 过渡：所有。5s轻松； } /*结束重要的风格*/ /*开始不相关的风格*/ .valueButton{ 边缘顶部：10px； } /*结束不相关的风格*/ Javascript、html和css复选框-有史以来最好的浏览器支持！ 正常复选框 默认选中

---

我认为你的问题是你给你的复选框起了相同的名字，因此它们被浏览器视为单选按钮，只有1是正确的

---

给他们起不同的名字，你应该能够检查所有的名字。

这不是我的本意。我尝试添加我的css和脚本>>>>你能解释一下你的意图吗？我希望我的自定义复选框。。。选中的。。。试试我的演示！！请插入所有脚本。如果我先选择名称2，则出现问题。然后我选择全部选中，效果正好相反。你们能分享一下吗？问题中的js似乎返回了预期的结果。尝试在checkAll的click事件中检查输入元素？更新了小提琴或尝试使用其他名称，并且已经修复了jsfiddle.net/npywzvaj/9谢谢

    <label><input type='checkbox' id='checkAll' name='name1' class='selectall' /></label>

    <label><input type="checkbox" name="name2" value="1" /> 1</label>
    <label><input type="checkbox" name="name2" value="2" /> 2</label>
    <label><input type="checkbox" name="name2" value="3" /> 3</label>

    <label><input type="checkbox" name="" value="4" /> 4</label>
    <label><input type="checkbox" name="" value="5" /> 5</label>

    .custom-checkbox{
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    z-index: 1;
    top: 3px;
    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
}
.custom-checkbox:hover{
    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat;
}
.custom-checkbox.selected{
    background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png") no-repeat;
}
.custom-checkbox input[type="checkbox"]{
    margin: 0;
    position: absolute;
    z-index: 2;            
    cursor: pointer;
    outline: none;
    opacity: 0;
    /* CSS hacks for older browsers */
    _noFocusLine: expression(this.hideFocus=true); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
}

$("#checkAll").change(function () {
    if ($(this).is(':checked')) {
        $(".check").prop('checked', true);
    }else{
        $(".check").prop('checked', false);
    }

});