Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trying to detect if any checked values contains a specific string [closed]

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

like image 329
Sweepster Avatar asked Feb 24 '19 16:02

Sweepster


People also ask

How do you detect if a checkbox is checked?

Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.

How do you check if a word is present in a string in typescript?

In typescript, string contains is one of the features and also it is referred to and implemented using the includes() method which is used to determine the string characters whether it contains the characters of the specified string or not by using this method we can return the boolean values like true and false ...

Which method is used to check the status of checkbox?

prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not. prop(): This method provides an simple way to track down the status of checkboxes. It works well in every condition because every checkbox has checked property which specifies its checked or unchecked status.

How do you check if a string contains a character in typescript?

Use the String. includes() method to check if a string contains a character, e.g. if (str. includes(char)) {} . The include() method will return true if the string contains the provided character, otherwise false is returned.


2 Answers

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 use a for loop or a .forEach() like I did in the below 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

    elementsList.forEach(e => {
      if (e.value == "photo" || e.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>
like image 142
Aniket G Avatar answered Sep 19 '22 16:09

Aniket G


There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.

Small summary:

Query selector

"#question5" + " input:checked"

The queryselector above looks wrong. It will work, but you can combine it into one string.

"#question5 > div:first-child > input:checked"

This query selector will make a safer selection. It selects through document.querySelectorAll all elements of type input that are checked within the first div child element of the element with id question5.

Iterating over a node list

Since document.querySelectorAll returns a nodelist (array like) which is not actually an array. In your code you used length check to <= 0. This will always execute the if. Drop the =. Now the if only fires when the nodelist has at least one entry.

Then we cast the nodeList to an array using Array.from and loop over it with Array.prototype.some. Which iterates over every element and if one condition matches it will return true.

We use String.prototype.search instead of String.prototype.indexOf since we can use a regexp to look for the value name|photo in one go. The | (pipe) tells the code to either look for name or photo. If the result is not -1 we found the value.

Working example

function admissible(method) {
  var b = 4;
  var answer = '';
  var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector

  //get the selected checkbox values for the missing elements
  if (elementsList.length > 0) { //Code works only if some checkbox is checked
    //cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.  

    if (method == "some") {
      var answerFilter = Array.from(elementsList).some(function(element) {
        return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
      });
    }
    else
    {
    
      //map returns an array and lets us return a value we want.
      var answerFilter = Array.from(elementsList).map(function(element) {
        return element.value;
      });
      //now use indexOf like in the original code
      if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
      {
        answerFilter = true;
      }
      else
      {
        answerFilter = false;
      }
    }
    answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else

  } else {
    //display error: you must select a value
  }
  console.log(answer);
}
* {
  font-family: tahoma;
  font-size: 10pt;
}

div.questionholder>div:first-child {
  display: grid;
  grid-template-columns: 20px auto;
  width: 100%;
}

h5 {
  grid-area: 1 2;
  white-space: nowrap;
}

label {
  grid-column: 2;
}

label>p {
  display: inline;
}

input {
  grid-column: 1;
}

div.holdButtons {
  margin: 10px 5px;
}

div.holdButtons>a {
  padding: 5px;
  background-color: #f4f4f4;
  cursor: pointer;
  border-radius: 4px;
}

div.holdButtons>a:hover {
  background-color: #e1e1e1;
}
<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('some')">Next <i>(Array.some)</i></a>
    <a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
  </div>
</div>
like image 37
Mouser Avatar answered Sep 21 '22 16:09

Mouser