How can I loop, regex and put into an array in jQuery

Cesar Aracena
Cesar Aracena used Ask the Experts™
on
Hello everybody,

I have a bunch of AJAX scripts that fetch and give data from and to PHP but the one I'm trying to make, I have no idea how to do it or which is the best way to do it. Here's the scenario:

  1. User selects 1st option form combo box and second combo box gets filled (AJAX)
  2. User selects 2nd option from second combo box and a table with check boxes appears at the bottom (AJAX)
  3. User selects/un-selects options (check boxes), hit SAVE and it supposedly saves the changes into the DB using AJAX and PHP

The problem is that the table rows with its check boxes are generated dynamically. Normally I would iterate through all the check boxes creating variables which would be passed as POST to a PHP function in another page using AJAX but, since in this case the check boxes are created dynamically I can't do that as I don't know the number of variables (check boxes) I will have to deal with or their IDs.

I've made a function in jQuery to fetch all check boxes generated in PHP and sent to the page and got this:

<input type=​"checkbox" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-14" name=​"author-14" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-10" name=​"author-10" data-theme=​"default" checked>​
<input type=​"checkbox" data-render=​"switchery" id=​"author-15" name=​"author-15" data-theme=​"default">​
<input type=​"checkbox" data-render=​"switchery" id=​"author-23" name=​"author-23" data-theme=​"default">​

Open in new window

and here's the function to produce that:

$('[id^="author-"]').each(function(i, val) {
	console.log(val);
});

Open in new window

What I would like to end up with is an array like [ "12"=>1, "13"=>1, "14"=>1, "10"=>1, "15"=>0, "23"=>0 ] so I can send it PHP in one variable and handle it there. Is it possible? I guess my question is how can I iterate through all the results, fetch the number after the dash in the id of each object, see if it's checked or not and push that into the end of an array?

Any help will be appreciated!!!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You can loop through data-render and filter on :checked as well as the value of data-render


https://jsbin.com/bafiwenovu/edit?html,console,output
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>test</title>
      <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      <script>
         $(function(){
           $("input[data-render='switchery']:checked").each(function(){
         var x = $(this).val();
         console.log(x);
         });
         });
      </script>
   </head>
   <body>
      <input type="checkbox" data-render="switchery" id="author-11" name="author-11" data-theme="default" value="1" checked>
      <input type="checkbox" data-render="switchery" id="author-12" name="author-12" data-theme="default" value="2" checked>
      <input type="checkbox" data-render="switchery" id="author-13" name="author-13" data-theme="default" value="3" checked>
      <input type="checkbox" data-render="switchery" id="author-14" name="author-14" data-theme="default" value="4" checked>
      <input type="checkbox" data-render="switchery" id="author-10" name="author-10" data-theme="default" value="5" checked>
      <input type="checkbox" data-render="switchery" id="author-15" name="author-15" data-theme="default" value="6">
      <input type="checkbox" data-render="switchery" id="author-23" name="author-23" data-theme="default" value="7">
      <input type="checkbox" data-render="something_else" id="author-23" name="author-23" data-theme="default" value="8">
      <input type="checkbox" data-render="something_else" id="author-23" name="author-23" data-theme="default" value="9" checked>
   </body>
</html>

Open in new window


Output

"1"
"2"
"3"
"4"
"5"
Expert of the Year 2008
Top Expert 2008
Commented:
>> [ "12"=>1, "13"=>1, "14"=>1, "10"=>1, "15"=>0, "23"=>0 ]
Typically, the browser will POST only the checked items, so if you actually want to know what's unchecked as well, then iterate over all input[type="checkbox"].  
var authors={};
$('input[type="checkbox"]').each(function(){
   let id = $(this).attr("id").replace(/\D/g,'')
   authors[id] = this.checked ? 1 : 0;
});
console.log(authors);

Open in new window


If you have "groups" of checkboxes, (some authors and some publishers) and you are interested just in a specific group, you can add a class to your checkboxes and use that class in the selector:
<input type=​"checkbox" class="author" data-render=​"switchery" id=​"author-11" name=​"author-11" data-theme=​"default" checked>​
<input type=​"checkbox" class="publisher" data-render=​"switchery" id=​"author-12" name=​"author-12" data-theme=​"default" checked>​
<input type=​"checkbox" class="author" data-render=​"switchery" id=​"author-13" name=​"author-13" data-theme=​"default" checked>​

let authors={};
$('input.author[type="checkbox"]').each(function(){
     let id = $(this).attr("id").replace(/\D/g,'')
   authors[id] = this.checked ? 1 : 0;
});
console.log(authors);

Open in new window

Cesar AracenaPHP Enthusiast

Author

Commented:
Thanks hielo!

Perfect!!! This is what I've got: {9: 1, 10: 1, 11: 1, 12: 1, 13: 1, 14: 1, 15: 0, 23: 0}

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial