Jquery assistance

1

how can i take all the id tags of the check boxes of a certain div element and put then into an array

2

First, you want to define your empty array let myArr = [];.
Then get all of the parent div $('.yourDiv')
Then you need to get all of the checkbox elements .find('input[type="checkbox"]')
Then you will want to loop through each of those elements .each()
Then provide a function to each for getting the id and putting it into your array function(index, node){ myArray[myArray.length] = $(node).attr('id');

3

the last sentence threw me off =\

4

.each() requires a function and will pass the index of the iteration and the node/object as parameters into that function. So something like this:

let myArr = [];
$('.yourDiv').find('input[type="checkbox"]').each(function(index, node){
    myArray[myArray.length] = $(node).attr('id');
});
5

what exactly are index and node in that function are they holding something thats the part throwing me off the most i dont get where you are getting those from

6

When in doubt hit the documentation :slight_smile:

http://api.jquery.com/jquery.each/

7

ya ive been search through w3schools for 2 days haha, i just cant find anything to do what i want but i will get it haha, i can get my program to run, just not the way i really want it to

8

I usually follow a process where I look at the specs first to see what examples they have. Then look to any tutorial sites for inspiration. I prefer Mozilla Developer Network generally - they have specs, examples, and decent tutorials for a variety of languages. After that I look to help sites like StackOverflow to see if other people have tried to do the same thing or run across a similar problem. Then there are also sites like css-tricks, smashingmagazine, alistapart, etc,. that offer a mix of technical, inspiration, and best practice articles.

10

thanks a ton the .push and .id is what ive been missing

11

another question is it possible for a single if statement to check multiple things and have it output different things also

13

var goBtn = document.getElementById(“doIt”);
goBtn.addEventListener(“click”, lrnLp);

function lrnLp() {
var boxes = [];
if ((boxes = $(“input[name=learnIn]:checked”)));
var checkboxIds = [];
var outPut;
for (var i = 0; i < boxes.length; i++) {
checkboxIds.push(boxes[i].id);
}

var outPut = “Study: \n”;

if (checkboxIds == “cPlusplus”) {
outPut += “C++ \n”;
}
if (checkboxIds == “learnJs”) {
outPut += “JavaScript \n”;
}
if (checkboxIds == “learnJa”) {
outPut += “Java \n”;
}
if (checkboxIds == “learnHtml”) {
outPut += “Html \n”;
}

if (outPut == undefined) {
alert(“Check some boxes”);
} else {
alert(outPut);
}
}

ok heres what i got so far its more complicated then i thought and think you guys can figure out what im trying do, it works almost like i want other then i cant get it out output more then one at a time

14

also my attempts at self teaching are not going well haha, but cant afford school so the hard way it is

15

@canapacoder I agree with @nhavar 's answer except for the last bit.

Always remember that when you use $() to select something it always returns a collection of array-like collection of objects. So you don’t have to iterate over the $() selected elements, just assign it to your empty array.

Consider this your html

<div>
  <input type="checkbox" id="1" />
  <input type="checkbox" id="2" />
  <input type="checkbox" id="3" />
</div>

Now if you console.log($('div').find('input[type="checkbox"]')).toArray(); It will return array of elements.
You can either use this array directly or assign it to a local variable.

If you want the value or id of these elements, you can iterate over it like a normal array forEach loop.

const elementsArr = $(div).find('input[type="checkbox"]')).toArray();
elementsArr.forEach(function (singleArrElement) {
    console.log(singleArrayElement.value, singleArrayElement.id);
});

Now instead of logging the elements as above, you can push them in a new array of your own using .push method .

$(node).attr('id') is same as node.id.

P.S. Use jQuery methods only when necessary.Methods .forEach(), .push(), .id can be used without any library in the browser.

16

what does the $(node) actually do

17

It’s because you can check if [‘learnJs’] == ‘learnJs’, but as soon as you add another id to the array then it’s actually testing the whole array against a single string and [‘learnJs’,‘learnJa’] == ‘learnJs’ ends up being false. To test if a string is in an array you need to use Array.indexOf() to test example if(checkboxIds.indexOf('learnJs'));

EDIT: Oh and you need to update your array when things are unchecked.

18

I tried to stay within the confines of it being a jquery question versus a best practices/vanilla js. But I agree with the concept of leaning more heavily on vanilla JavaScript when there isn’t any immediate benefit from a library or the effort to make it vanilla is pretty low.

1 Like
19

It wraps all the fancy jQuery methods on top of an existing DOM node.

Suppose you wanted to hide an anchor tag.
<a href="#close" class="btn-close">X</a>

By using vanilla javascript you can select an element like this:

const anchorEle = document.querySelector('a.btn-close');

To hide it you gave to do anchorEle.style.display = 'none';
OR by wrapping jQuery around the element Object you can do $(anchorEle).hide();

Hope that clarifies what $() wrapping does…
You can also check this StackOverflow Question for further clarification.

20

thanks but im not trying to hide any parts currently :slight_smile:

1 Like
21

the indexOf just doesnt seem to work how i want , it just seems to output something even if its not true for the if statement

22

Sorry I forgot to update the conditional, you need to make sure it’s not -1 (not found).

if (checkboxIds.indexOf("cPlusplus") >= 0) {