Question

我正在尝试使用querySelector从输入单选按钮获取值，但是我想编写条件“如果输入被选中=控制台日志是输入值，但是如果未选中输入=控制台日志为0”

我的代码是：

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

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

但是我试图写这个：

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

并且程序仍然无法运行。控制台日志什么也没显示。

我的HTML代码是：

function getVal(){

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

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

}

编辑

我使用querySelectorAll并对其进行了修复。

如果未选中输入单选，则控制台中的值为0。如果选中了选中的单选按钮，则可以从选中的单选中获取价值。

这是我的新代码

function getVal(){

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

}

$route = Route::current();

但是我仍然不明白为什么我没有用这段代码获得价值：

$route

感谢帮助人员。异端猴解决了它。

最终代码：

<button *ngIf="!form.submitted && !form.form.invalid" class="btn btn-lg btn-primary" [ngClass]="extraClasses"
  type="submit"> {{text}}</button>

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

Javascript querySelector获取值条件

1 个答案: