Graphical checkbox

Question

Hello!

I have a huge problem with javascript and new graphical checkboxes in version 7. Can anyone please help me with a problem. I have this part of code, which worked in version 6. I would like to use it with graphical checkboxes. But getElementsByTagName('input') isn`t working. Can you help me with modifying this code for graphical checkboxes.

Thank you


 window.onload=function() {
                var chkBoxes = document.getElementById('table1').getElementsByTagName('input');
                for(i=0; i < chkBoxes.length; i++) {
                    chkBoxes[i].onclick=function() {
                        var nextTd = getNextSibling(this.parentNode) ; //get the next td in this row
                        nextTd.style.visibility = (this.checked)? 'visible' : '';
                    }
                }
            }
        </script>

Answer 1

edited and consolidated answer:

free format question named test; has a checkbox variable named c1 with 2 options
question html code:

<table id="table1" cellspacing="20">
    <tr>
        <td class="input_cell clickable">
            [%CheckSelect(test_c1, 1)%]
        </td>
        <td class="tdHidden">
            When checked you see this!
        </td>
    </tr>
    <tr>
        <td class="input_cell clickable">
            [%CheckSelect(test_c1, 2)%]
        </td>
        <td class="tdHidden">
            When checked you see this!
        </td>
    </tr>
</table>

advanced/head tag code:

<style type="text/css">
.tdHidden
{
    visibility: hidden
}
</style>

<script type="text/javascript">

function getNextSibling(elem) 
{
          var nextSib = elem.nextSibling;
        while (nextSib.nodeType !=1 )
    {
                   nextSib = nextSib.nextSibling;
    }
        return nextSib;
}

//assign an onclick even handler to the checkboxes
window.onload=function() 
{
    var divs = document.getElementById('table1').getElementsByTagName('div');
    for(i=0; i < divs.length; i++)
    {
        if (divs[i].className == "graphical_select checkbox")
        {
            divs[i].onclick=function()
            {
                    var nextTd = getNextSibling(this.parentNode) ; //get the next td in this row
                if(this.className == "graphical_select checkbox"){ nextTd.style.visibility = 'visible'; }
                if(this.className == "graphical_select checkboxselected"){ nextTd.style.visibility = 'hidden'; }
                }
        }
    }
}
 </script>

it would be a nice addition if you also apply the method in https://sawtoothsoftware.com/forum/555/tds-are-still-clickable-even-the-inputs-are-hidden-disabled to make your TD's not clickable. because with my proposed code here, the text is not shown if the respondents click the thin area just outside of the checkbox. FYI :)

Comments

totally forgot about it, playing with it now :)

---

Hello again,

I couldn't succeed with it, removing the clickable attribute breaks down the checkbox functionality (at least the way I did things).

can't help you further I'm afraid.

---

Yes I know that. I had the same problem.

Thank you for all your time and if I`m going to find a solution I`ll let you know.

---

Hello!

I would like to let you know that I managed to shrink the clickable space around graphical checkbox with CSS:

.freeformat .input_cell
{
    padding: 0px;
}

So there is no more tiny area around checkbox that wouldn`t show the text :)

---

Great Miha!

actually I've tried that earlier, but probably have chosen a wrong .input_cell it seems :)