Proper Way to Append Class & AJAX Call
<p>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.</p>

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

<p>1) Toggle the class name of a div located directly below it.</p>

<p>2) Post via AJAX the state.</p>

<p><strong>Here is my current markup:</strong></p>

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

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

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

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

<p><strong>Here is my current JS:</strong></p>

<pre><code>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 = "";
 }
}
</code></pre>

<p>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!</p>
