Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Select all checkboxes and fire event?

Posted by: tk=lm2408 Feb 20 2017, 03:58 AM

I have a bunch of checkboxes, I also have a select all link that will select all of the checkboxes on the page. This all works fine. The problem is that I need to call their function as soon as they are selected. The script I have for this is:

CODE
<script type="text/javascript">
    function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++)
{
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}
</script>


This is the html for the checkboxes:
CODE

<li><input type="checkbox" class="focusable"
onfocus="parentFocus(event)" onblur="parentBlur(event)"
value="my data"><label>label text</label></li>



I am happy with this so far except for it not firing the event on selection.
Thank you
Greg

Posted by: pandy Feb 20 2017, 05:56 AM

I think you can use onchange for the check boxes.

Posted by: Christian J Feb 20 2017, 10:50 AM

QUOTE(tk=lm2408 @ Feb 20 2017, 09:58 AM) *

I also have a select all link that will select all of the checkboxes on the page.

The script seems to expect a "sourceCheckbox"...

QUOTE
The problem is that I need to call their function as soon as they are selected. The script I have for this is:

That script just checks/unchecks all the checkboxes, it doesn't call each checkbox's associated function.

QUOTE
This is the html for the checkboxes:

onfocus and onblur would fire right away for someone using keyboard navigation. onchange might work when the user clicks each checkbox directly, but doesn't seem to fire when the checkbox is checked by the script. Instead you can simply test if the sourceCheckbox is checked or not (if it is, the other ones should already be checked as well).

BTW the INPUT should be inside its LABEL (unless you use INPUT IDs with the LABEL's FOR attribute).

Posted by: tk=lm2408 Feb 20 2017, 03:43 PM

Hi Christian,

This is the link to select all checkboxes:

CODE
<input type="checkbox" class="focusable all" onfocus="parentFocus(event)" onblur="parentBlur (event)" onChange="setAllCheckboxes('playlist', this);" />Select All</li>


If I select all and refresh the page it works, but if I don't refresh it selects them all but doesn't fire.

This is the script I am trying to call:

CODE
//![CDATA[
  $(function(){
  $('.button').click(function(event) {
   event.preventDefault();
    if ($("#TextToSave").text() == "type your text here ...") {
      $("#TextToSave").text($(this).html());
    } else {
     $("#TextToSave").text($("#TextToSave").text() + $(this).html() +'</track>');
    }
  });
});]]

If I move the checkbox inside the label it messes up the keyboard nav.
Sorry not to good at javascript yet, still learning.

Thank you for your time.
Greg

Posted by: Christian J Feb 20 2017, 06:42 PM

QUOTE(tk=lm2408 @ Feb 20 2017, 09:43 PM) *

If I select all and refresh the page it works, but if I don't refresh it selects them all but doesn't fire.

Test if the sourceCheckbox is checked or not, that should work in either case.

QUOTE
This is the script I am trying to call:

That jQuery(?) script looks for click events on an element with the CLASS "button", but your checkboxes don't use that. The rest of the script refers to unknown bits of HTML too. unsure.gif

QUOTE
If I move the checkbox inside the label it messes up the keyboard nav.

It should be opposite case, actually.

Posted by: tk=lm2408 Feb 20 2017, 07:03 PM

Sorry for my ignorance but how do I test if the sourceCheckbox is checked or not?

The script I'm calling takes the value of the checkbox and adds it to a textarea, then I have another button the saves the textarea to a text file.

I don't know why the label is working that way.

I just tried adding a button class to the checkbox, but that didn't work either.

The checkboxes do work fine if I manually click them.

Posted by: Christian J Feb 20 2017, 07:19 PM

Here's a simplified toggle script, I've changed a few names of IDs and variables:

CODE
<script type="text/javascript">
function doSomething()
{
    var result=document.getElementById('result');
    var global=document.getElementById('global');
    var ul=document.getElementById('ul');
    var input=ul.getElementsByTagName('input');

    result.innerHTML='Result: ';

    for (var i=0; i<input.length-1; i++) // -1 because last INPUT is the global toggle
    {
        if(global.checked)
        {
            input[i].checked=true;
        }

        if(input[i].checked)
        {
            result.innerHTML+=input[i].value;
        }
    }
}
</script>

<ul id="ul">
<li><label><input type="checkbox" value="my data1" onchange="doSomething();">label text</label></li>
<li><label><input type="checkbox" value="my data2" onchange="doSomething();">label text</label></li>
<li><label><input type="checkbox" id="global" onchange="doSomething();">check all</label></li>
</ul>

<p id="result">Result: </p>


Note that unchecking the global checkbox won't uncheck the individual ones (I assume that's how you want it to work). Also you need to uncheck the global checkbox before you can uncheck the individual ones, which might be annoying (another idea might be to uncheck the global checkbox whenever an individual one was unchecked).

Posted by: tk=lm2408 Feb 20 2017, 07:30 PM

Thank you very much Christian I'll have a play with that and see what I can do. I really appreciate your time and patience while helping me smile.gif

Posted by: tk=lm2408 Feb 20 2017, 10:16 PM

Woo hoo! Got it working. Thank you Christian smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)