Javascript querySelector获取值条件

Question

我试图通过querySelector从输入单选按钮获取值，但我想写条件“如果输入被检查=控制台日志是输入值，但如果未检查输入=控制台日志为0”

我的代码是：

function getVal(){

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

    } 
}

如果我现在调用函数getVal，我从检查输入中获取值。

但我试着写这个：

function getVal(){

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

但程序无法正常运行控制台日志。

然后我试过了

function getVal(){

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

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

}

仍然无法正常工作。控制台日志没有显示。

我的HTML代码是：

<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>

编辑

我使用querySelectorAll并修复它。

如果未检查输入无线电，​​则控制台中的值为0.如果选中输入无线电，​​则从已检查的无线电中获取值。

这是我的新代码

        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">

但我仍然不明白为什么我没有得到这个代码的价值：

function getVal(){

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

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

}

谢谢你的帮助。 Herectic Monkey解决了它。

最终代码：

function getVal(){

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

}

Answer 1

你可以使用jQuery实现它非常简单，

$('.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">