Javascript querySelector get value condition

Question

I am trying to get value from input radio button with querySelector, but I want to write condition "if input is checked = console log is input value, but if input is not checked = console log is 0"

My code is:

function getVal(){

    var firstVal= document.querySelector("input[name='price1']:checked");
    if (firstVal.checked){
       console.log(firstVal.value);

    } 
}

If i call function getVal now i get value from checked input.

but i tried to write this :

function getVal(){

    var firstVal= document.querySelector("input[name='price1']:checked");
    if (firstVal.checked){
        console.log(firstVal.value);
    } else 
        console.log(0);
    }
}

but program not working console log shows nothing.

Then i tried

function getVal(){

    var firstVal= document.querySelector("input[name='price1']:checked");
    if (firstVal.checked){
          console.log(firstVal.value);
    } 

    if (firstVal.checked === false){
          console.log(0);
    }

}

And still program not working. Console log shows nothing.

My HTML code is:

<label for="test1">test1</label>
<input type="radio" name="price1" id="test1" value="1" onchange="showPrice();">
<label for="test2">test2</label>
<input type="radio" name="price1" id="test2" value="2" onchange="showPrice()">
<label for="test3">test3</label>
<input type="radio" name="price1" id="test3" value="3" onchange="showPrice()">
<label for="test4">test4</label>
<input type="radio" name="price1" id="test4" value="4" onchange="showPrice()">
</div>

Edit

I use querySelectorAll and I fixed it.

If is not checked input radio, value in console is 0. If is checked input radio, you get value from checked radio.

Here is my new code

        function getVal() {
            var firstVal = document.querySelectorAll("input[name='price1']");

              if (firstVal[0].checked){
                  console.log(firstVal[0].value);
              }   
              if (firstVal[1].checked){
                  console.log(firstVal[1].value);
              }
              if (firstVal[2].checked){
                  console.log(firstVal[2].value);
              }
              if (firstVal[3].checked){
                  console.log(firstVal[3].value);
              }

              if(firstVal[0].checked === false && firstVal[1].checked === false && firstVal[2].checked === false && firstVal[3].checked === false){
                  console.log(0);
              }

        }

  <button onclick="getVal()">test</button><div class="priceInput">
      <label for="test1">test1</label>
      <input type="radio" name="price1" id="test1" value="1">
      <label for="test2">test2</label>
      <input type="radio" name="price1" id="test2" value="2">
      <label for="test3">test3</label>
      <input type="radio" name="price1" id="test3" value="3">
      <label for="test4">test4</label>
      <input type="radio" name="price1" id="test4" value="4">

But still I dont understand why I didnt get value with this code:

function getVal(){

    var firstVal= document.querySelector("input[name='price1']:checked");
    if (firstVal.checked){
          console.log(firstVal.value);
    } 

    if (firstVal.checked === false){
          console.log(0);
    }

}

Thank for help guys. Herectic Monkey solved it.

Final code:

function getVal(){

var firstVal= document.querySelector("input[name='price1']:checked");
if (firstVal) { 
    console.log(firstVal.value); 
} else { 
    console.log(0); 
}

}

If you use a selector ending in `:checked`, you will only find the checked inputs to begin with. So `firstVal.checked` is obsolete. firstVal will always be checked due to the `input[name='price1']:checked` selector finding the first checked input or null. So your else clause will never trigger as written. — Shilly, Feb 26 '19 at 15:26
A couple notes: You don't have a function created called showPrice but it is referenced in onchange. and you use :checked in your querySelector then repeat in your IF, remove it from querySelector. — imvain2, Feb 26 '19 at 15:27
Is it the answer you're looking for https://stackoverflow.com/questions/54888836/javascript-queryselector-get-value-condition/54889100#54889100 — Googlian, Feb 26 '19 at 15:39
Shilly i know but i tried to remove :checked from queryselector and now i can get only value from first input. I tried to use querySelectorAll but i get always all inputs in node list — Tomas, Feb 26 '19 at 20:17
Just use `if (firstVal) { console.log(firstVal.value); } else { console.log(0); }`. — Heretic Monkey, Feb 26 '19 at 20:52
Possible duplicate of [How to get value of selected radio button?](https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button) — Heretic Monkey, Feb 26 '19 at 20:52

Googlian · Answer 1 · 2019-02-27T04:42:56.423

0

You can achive it using jQuery very simple,

$('.test').change(function(){

   var isChecked = $(this).is(':checked');
   
   console.log(isChecked ? $(this).val() : 0);
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="test1">test1</label>
<input type="checkbox" name="test1" class="test" value="1">
<label for="test2">test2</label>
<input type="checkbox" name="test2" class="test" value="2">
<label for="test3">test3</label>
<input type="checkbox" name="test3" class="test" value="3">
<label for="test4">test4</label>
<input type="checkbox" name="test4" class="test" value="4">

edited Feb 27 '19 at 04:42

answered Feb 26 '19 at 15:37

Googlian

6,077
3
38
44

If you remove showPrice and call getval it is the same. But still does not show 0 value if is not checked any input – Tomas Feb 26 '19 at 20:20
Check my latest answer https://stackoverflow.com/questions/54888836/javascript-queryselector-get-value-condition/54889100#54889100 – Googlian Feb 27 '19 at 04:43

Javascript querySelector get value condition

1 Answers1