0

我已经看到了其他的例子，但还没有成功地让它正常工作。我看到的示例也只是使用常规复选框。我使用了一个类来使用精灵表对复选框进行样式化，因此在将这些其他示例的想法应用到我的案例中时遇到了一些麻烦。

这是标记：

<div id="showHideAll"">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" class="pinToggles" onclick="checkAllLinks()">
    <label for="allCheck" class="css-label"></label></div>
</div>

<div>Opt1<input type="checkbox" id="opt1Check" name="pinSet" class="pinToggles" onclick="checkOpt1Links()">
    <label for="opt1Check" class="css-label"></label>
</div>

<div>Opt2<input type="checkbox" id="opt2Check" name="pinSet" class="pinToggles" onclick="checkOpt2Links()">
     <label for="opt2Check" class="css-label"></label>
</div>

<div>Opt3<input type="checkbox" id="opt3Check" name="pinSet" class="pinToggles" onclick="checkOpt3Links()">
     <label for="dinShopCheck" class="css-label"></label>
</div>

选中的属性是使用 css 类更改精灵的内容。

input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}

其中大部分是用于其他功能，但我想我会展示它以防万一。

这就是我设置各个复选框的方式：

function checkOpt1Links(){
    $('#opt1 li a').toggleClass("inactive");

 if(opt1.getVisible() == true)
    {       
        opt1.setOptions({visible:false});
    }
    else
    {
        opt1.setOptions({visible:true});
    }
}

我正在寻找的是典型的全选复选框功能，如果您选中它，所有复选框都会选中，如果您取消选中它们都会取消选中，而且如果您在选中全选时单击一个框，则全选并单击复选框取消选中和反之亦然。我确实看过这个例子：Jquery“全选”复选框 ，但很难让它工作。谢谢您的帮助！

4

1 回答 1

0

1) 使用change事件处理程序而不是clickforcheckbox和radio按钮。

你可以像这样简单

$('#showHideAll').on('change', 'input[type=checkbox]', function () {
    if ($('.pinToggles').is(':checked')) {
        $('.pinToggles').prop('checked', false)
    }
    else {
    $('.pinToggles').prop('checked', true)
    }
});

2) 我只删除了下面的classandonclick事件处理程序checkbox。

HTML：

<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
    <label for="allCheck" class="css-label"></label></div>
</div>

检查这个JSFiddle

于 2013-10-14T14:50:04.757 回答