Question

我试过这个脚本，用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");

})

显示在css上看起来不错。然后我想为checkall和uncheckall创建一个复选框..我试过这个脚本......

$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});

只有默认复选框成功。自定义复选框我的工作无效。请帮忙解决。

简单的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>

css：

    .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;
}

DEMO

Answer 1

DEMO

试试这个

DEMO UPDATED

我添加了选定的课程以便检查自定义复选框

Answer 2

我为自己的个人使用编写了一些代码，似乎很适合这个问题。这是我创建的工作jsfiddle的链接...... http://jsfiddle.net/www139/wpq6qjyf/

它会涉及重做复选框，但无论如何它可能会更好。这是一个代码演示......

＆＃13;

/*
* PLEASE NOTE THAT THE 'checkboxDot' DIV MUST COME BEFORE ANY OTHER INNER MARKUP.
* IT MUST COME IMMEDIATELY AFTER THE PARENT DIV! IT WILL NOT WORK OTHERWISE!!!
*
* Thank you for showing interest in this code!
*/

/*IMPORTANT STYLES... THE STYLES LATER ARE NOT DIRECTLY RELATED THE THE CHECKBOXES*/

.checkbox {
  background-color: #eee;
  border-radius: 3px;
  padding: 5px;
  display: table;
}
.checkbox input {
  outline: none;
  border: 0;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
}
.checkbox .checkboxDot {
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.checkbox .checkboxDotActive {
  background-color: #01A1DB;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
/*END IMPORTANT STYLES*/

/*START IRRELEVANT STYLES*/

.valueButton {
  margin-top: 10px;
}
/*END IRRELEVANT STYLES*/

＆＃13;

<h1>Javascript, html, and css checkboes -- best browser support ever!</h1>


<h3>Normal checkbox</h3>

<div id="checkboxOne" class="checkbox">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 1">
</div>
<div id="checkboxOneStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxOneStatus').innerHTML = document.getElementById('checkboxOne').getAttribute('name');" value="Is it checked?">

<h3>Checked by default</h3> 
<div id="checkboxTwo" class="checkbox" name="checked">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 2">
</div>
<div id="checkboxTwoStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxTwoStatus').innerHTML = document.getElementById('checkboxTwo').getAttribute('name');" value="Is it checked?">

＆＃13;

.checkbox

＆＃13;

请记住，复选框的HTML标记必须按照它所在的确切顺序，否则JavaScript将无效。此代码算法将为您提供对复选框和其他元素样式的更多控制。它也不需要JQuery。要默认选中复选框，只需为name="checked" div提供{{1}}属性即可。您可能还必须覆盖CSS按钮所具有的当前样式，因为每个复选框中都包含一个按钮元素。希望这有助于某人。

Answer 3

我认为您的问题是您的复选框名称相同，因此浏览器会将它们视为单选按钮（只有1个可以为真）。

给他们不同的名字，你应该能够全部检查。

Javascript检查所有自定义复选框？

3 个答案: