Trying to detect if any checked values contains a specific string

  • A+
Category:Languages

I'm trying to grab the values of all checked input options from a series of checkboxes and find if any of the checked values matches a specific string:

function admissible() {   var b = 4;   var answer = '';   var elementsList = document.querySelectorAll("#question5" + " input:checked");    //get the selected checkbox values for the missing elements   if (elementsList.length >= 0) { //Code works only if some checkbox is checked     if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes       answer = 'yes';     } else {       answer = 'no';     }   } else {     //display error: you must select a value   }   console.log(answer); }
<div class="questionholder" id="question5">   <div>     <h5>Select all elements</h5>     <input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>     <input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>     <input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>   </div>   <div class="holdButtons">     <a class="text2button" onclick="admissible()">Next</a>   </div> </div>

elementsList doesn't seem to be storing the values of the checked boxes. How do I resolve this?

JSFiddle

 


There were multiple errors in this code. I also changed a bit to make it simpler.

  1. You have to use .indexOf() not .indexOF(). Small typos like those can throw your whole code off.
  2. For document.querySelectorAll, you only need input:checked. #question5 is completely unecessary (since none of the values have an id of question5).
  3. .querySelectorAll returns a NodeList which is more like an object than an array. Therefore, .indexOf() does not work on it. You must loop through it to find the value. (.forEach() also doesn't work because it's a NodeList, which is like an array but not one. You can do console.log(elementsList to see what it looks like. To loop through a NodeList, you can use a regular for loop like I did in the snippet).
  4. I set the default value of answer to "no", and if it finds photo or name, it will set the value to "yes" (which is easier better than having an if else statement for this).

The snippet below works for you.

function admissible() {   var b = 4;   var answer = 'no';   var elementsList = document.querySelectorAll("input:checked");    //get the selected checkbox values for the missing elements   if (elementsList.length >= 0) { //Code works only if some checkbox is checked      for (var i = 0; i < elementsList.length; i++) {     if (elementsList[i].value == "photo" || elementsList[i].value == "name") {       answer = "yes";     }   }      } else {     //display error: you must select a value   }   console.log(answer); }
<div class="questionholder" id="question5">   <div>     <h5>Select all elements</h5>     <input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>     <input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>     <input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>   </div>   <div class="holdButtons">     <a class="text2button" onclick="admissible()">Next</a>   </div> </div>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: