Question

Ok, so I really don’t think I’m structuring my JS properly, and am hoping someone can point me in the right direction. I don’t think sequentially naming the classes for each list item is an effective, or proper way of accomplishing this.

I have a list of checkboxes that, when clicked, need to perform two actions:

1) Toggle the class name of a div located directly below it.

2) Post via AJAX the state.

Here is my current markup:

<ol class="toolkitList">
<li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers" onchange="setCheck();" /><b id="grayTitle">List Title 1</b></label>
                <i id="hiddenDiv">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers2" onchange="setCheck2();" /><b id="grayTitle2">List title 2</b></label>
                <i id="hiddenDiv2">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers3" onchange="setCheck3();" /><b id="grayTitle3">List title 3</b></label>
                <i id="hiddenDiv3">Div content can go here.</i>
        </li>

        <li>
            <label><input class="inlineCheckers" type="checkbox" id="checkers4" onchange="setCheck4();" /><b id="grayTitle4">List Title 4</b></label>
                <i id="hiddenDiv4">Div content can go here.</i>
        </li>
    </ol>

Here is my current JS:

function setCheck() {
var el = document.getElementById("checkers");

if (el.checked) {
    document.getElementById("hiddenDiv").className = "main";
    document.getElementById("grayTitle").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv").className = "";
    document.getElementById("grayTitle").className = "";
 }
}

function setCheck2() {
var el2 = document.getElementById("checkers2");

if (el2.checked) {
    document.getElementById("hiddenDiv2").className = "main";
    document.getElementById("grayTitle2").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv2").className = "";
    document.getElementById("grayTitle2").className = "";
 }
}

function setCheck3() {
var el3 = document.getElementById("checkers3");

if (el3.checked) {
    document.getElementById("hiddenDiv3").className = "main";
    document.getElementById("grayTitle3").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv3").className = "";
    document.getElementById("grayTitle3").className = "";
 }
}

function setCheck4() {
var el4 = document.getElementById("checkers4");

if (el4.checked) {
    document.getElementById("hiddenDiv4").className = "main";
    document.getElementById("grayTitle4").className = "titleGray";
 } else {
    document.getElementById("hiddenDiv4").className = "";
    document.getElementById("grayTitle4").className = "";
 }
}

I realize I don’t have the AJAX portion of this setup yet, but I wanted to make that requirement known, as I will be adding that part into the code shortly. Thanks for any guidance you can provide!

Answer 1

You could also apply the class to outer div

CSS:

.selected label b {
    color:blue
}
.selected i {
    color:red
}

JS:

$(".inlineCheckers").on('click',function(){
    $(this).parents("li").toggleClass('selected',$(this).is(":checked"));
})

jsfiddle : http://jsfiddle.net/y2rHF/3/