How to iterate over Div and extract individual check box values?

[James Dekker]

I am very new to JavaScript / JQuery...

Need to iterate over the following segment of code and either return an array or single value the e-mail addresses assigned to these labels (these are hardcoded as the check boxes values):

	<div id="emailCheckListId" class="checkList">

		<ul id="emailCheckListId_ul">
			<li>
				<label for="root.module.emailCheckList_0" class="checkListLabel">
					<input type="checkbox"  
                     value="[e-mail]" 
                     id="root.module.emailCheckList_0" 
                     name="root.module.emailCheckList"/>
					       John Doe
				</label>
			</li>
			<li>
				<label for="root.module.emailCheckList_1" class="checkListLabel">
					<input type="checkbox"  
                     value="[e-mail]"
                     id="root.module.emailCheckList_1"
                     name="root.module.emailCheckList"/> 
				           Jane Doe
				</label>
			</li>
		</ul>
	</div>

Have written a JQuery event listener which does this:

	$('#emailCheckListId_ul').click(function() {
		var divElement = document.getElementById(emailCheckListId);
		
		// How to iterate over each element and obtain something like this:
		//
		// [[e-mail],[e-mail]]
	});

Any help would be most appreciative...

Thank you for taking the time to read this!

[Bear Bibeault]

http://api.jquery.com/map/

[James Dekker]

Thank you so much, Bear!

Quick question, how can I set it up that I know what e-mails are checked and once someone unchecks the "check" e-mail (by removing the check mark) what e-mails are unchecked?

[Bear Bibeault]

The :checked filter will limit the wrapped set to just checked elements.

[James Dekker]

Thanks Bear,

But like I said, I am a JavaScript newbie and don't really understand where to put that filter in my code. Can you give me an example? What I need it to do is check multiple checkboxes (as an end user) and each time the checkboxes are checked to move the e-mails to an input text field. But, what ever ones are unchecked, to immediately remove them from the input text field (while keeping the remaining checked ones in).

[Bear Bibeault]

The filter is placed after the selector to be narrowed. For example: input:checkbox:checked filters the set of inputs to checkboxes that are checked.

You should probably pick up a copy of my book.

[James Dekker]

Thanks Bear,

So, how could I use input:checkbox:checked, in code, such as this:

$('#emailCheckListId_ul').click(function() {
  var divElement = $('#' + emailCheckListId);

  var emails = $(this).find('li input').map(function() {
   displayEmails( $(this).val() );
  }); // => ['[e-mail]', '[e-mail]']
});

I am going to pass in the result of this code to something like this:

function displayEmails(String [] emailArray)  {               // Is the right parameter to use in JavaScript?
        for (i=0; i < emailArray.length; i++) {
           // mechanism for putting in each email in an input text field using emailArray[i].val() ?
         }
}

And also use it to remove e-mails addresses placed in a input text field when an end user unchecks them?

Thank you for all of your help... Will definitely buy your book but probably in epub format!

[James Dekker]

Bear,

I got it working with the filter:

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
    
	// Declare array
	var emails = [];
	
    // Iterate through each array and put email addresses into array
    $('#emailCheckListId_ul input:checkbox:checked').each(function() {
          emails.push($(this).val());
    });
    
    // Assign variable as To: text field by obtaining element's id.
    var textField = document.getElementById("root.form.email");
    
    // Add / Remove array from text field
	textField.value = emails;
});

And it dynamically removes e-mail addresses via unclicking the checkbox!
Thanks for telling me about it!

[Bear Bibeault]