The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Select all checkboxes and fire event?
tk=lm2408
post Feb 20 2017, 03:58 AM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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

This post has been edited by tk=lm2408: Feb 20 2017, 04:05 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 20 2017, 05:56 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,546
Joined: 9-August 06
Member No.: 6



I think you can use onchange for the check boxes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 20 2017, 10:50 AM
Post #3


.
********

Group: WDG Moderators
Posts: 7,530
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 20 2017, 03:43 PM
Post #4


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 20 2017, 06:42 PM
Post #5


.
********

Group: WDG Moderators
Posts: 7,530
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 20 2017, 07:03 PM
Post #6


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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.

This post has been edited by tk=lm2408: Feb 20 2017, 07:14 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 20 2017, 07:19 PM
Post #7


.
********

Group: WDG Moderators
Posts: 7,530
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 20 2017, 07:30 PM
Post #8


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 20 2017, 10:16 PM
Post #9


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



Woo hoo! Got it working. Thank you Christian smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd April 2017 - 12:52 PM