I have come across similar examples in the past, but I have been unable to make it work as intended. The examples I found only use standard checkboxes. I attempted to customize the checkbox using a sprite sheet by applying a class, but I am struggling to apply the concepts from those examples to my specific case.
Here is the code snippet:
<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>
The appearance of the sprite changes based on the 'checked' property using a css class.
input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}
Most of this code pertains to other functionalities, but I included it for reference purposes.
This is how I structured the individual checkboxes:
function checkOpt1Links(){
$('#opt1 li a').toggleClass("inactive");
if(opt1.getVisible() == true)
{
opt1.setOptions({visible:false});
}
else
{
opt1.setOptions({visible:true});
}
}
I am trying to achieve the common functionality of a 'select all' checkbox where checking it selects all boxes and unchecking it deselects them, but also clicking any box when the select all is checked should uncheck both the select all and the clicked checkbox and vice versa. I referenced this example: Jquery "select all" checkbox but I am struggling to implement it correctly. Thank you for any assistance!