How to do a Select All checkbox in html?

Question

I have a html form, which has lots of checkboxes, and there is a Select All box on top, how to make the Select All box auto select all the checkboxes below according to the Select All box choice ?

enter image description here

I didn't want to show the code, because it's nasty looking, I'm debugging an old app, but since you asked, here it is :

<script language="javascript">
    function selectAll2(value) {
        var elem = document.forms[1].getElementsByTagName("select");
        var count = ${questionCount};
        for(var i = 1; i <= count; i++) {
            if(i != 23 || (i==23 && ${w.carrier.stateOfDomicile ne 'FL'})) {
                elem[i].value = value;
                showNoShowQuestionaire(i,'Y','N',value);
            }
        }
    }
</script>

<!-- Question # ${n} --> 
    <tr>
        <td class="${labelClass}" align="right" valign="top" width=26%>
            ${n}.&nbsp;&nbsp;
        </td>
        <td class="${labelClass}" align="left">
            ${q}
        </td>
        <c:choose>
        <c:when test="${not_applicable eq 'Y'}">
            <td valign="top">
                <div id="QT_${n}">
                <html:select disabled="${disabled}" property="answers" styleClass="display: none;" value="${s}">
                    <html:option value="Y">Yes</html:option>
                </html:select>
                </div>
                <script language="javascript">
                    document.getElementById("QT_${n}").style.display = 'none';
                </script>

            </td>
        </c:when>
        <c:otherwise>
            <td valign="top">
                <html:select disabled="${disabled}" property="answers" styleClass="processSelect" value="${s}" onchange="showNoShowQuestionaire('${n}','${yes_exp}','${no_exp}',this.value);">
                    <html:option value="">--</html:option>
                    <html:option value="N">No</html:option>
                    <html:option value="Y">Yes</html:option>
                </html:select>
            </td>
        </c:otherwise>
        </c:choose>
    </tr>

From the above code, I got an error message for firefox and Chrome, it says : elem[i] undefined. It works fine in IE.

Since my app needs to work in all browsers, is there a solution that works for all browsers ?

Those are dropdowns, not checkboxes. What exactly do you mean by *"select all the checkboxes"*..? and also, post the generated HTML rather than your templating language, not everybody is running a server all the time. Or else, don't tag this with `HTML`, tag with whichever server side and templating language you're using. — T J, Nov 06 '14 at 10:25

Ignas Damunskis · Answer 1 · 2014-11-05T22:12:19.380

1

First, they are not checkboxes, they are select elements. Well you can use javascript (jquery).

$('.yesToAll').change(function(){
    if ($( "select option:selected" ).text() == 'Y') {
        //add attr selected to all other selects Yes options
    }
});

edited Nov 05 '14 at 22:12

answered Nov 05 '14 at 21:59

Ignas Damunskis

1,515
1
17
44

1

Don't use `click` event for this, you should use `change` instead! – adrenalin Nov 05 '14 at 22:01

score 0 · Accepted Answer · answered Nov 06 '14 at 17:11

I found the answer, I used the following code to fix the problem :

function selectAll2(value) {
    var elements = document.forms[1].elements;
    for (i=0;i<elements.length;i++) if (elements[i].tagName == 'SELECT') elements[i].value = value;

    var count = ${questionCount};
    for(var i = 1; i <= count; i++) if(i != 23 || (i==23 && ${w.carrier.stateOfDomicile ne 'FL'})) showNoShowQuestionaire(i,'Y','N',value);
}

How to do a Select All checkbox in html?

2 Answers2