如何獲取僅選中復選框的選項值？

Question

我只想獲取所選復選框的選項值，但是我從所有復選框中獲取值。

我的HTML代碼：

 <div class= "outer">
    <div class="inner" id="inner">
    <input type="checkbox" name="machine" value="plane">BBQ Sauce<br>
      <select class="weight" name="m2" id="m2">
        <option value="1">Light</option>
        <option value="2">Normal</option>
        <option value="3">Extra</option>
      </select>

    </div>
    <div class="inner" id="inner">
    <input type="checkbox" name="machine" value="plane"> Alfredo Sauce<br>
       <select class="weight" name="m2" id="m2">
          <option value="1">Light</option>
          <option value="2">Normal</option>
          <option value="3">Extra</option>
       </select>
    </div>
 </div>
<input type="submit" value="Submit">

我的JavaScript代碼：

 function myAction(){
   var vals = [];
   var machine = document.getElementsByName('machine');

   var m2 = document.getElementById('m2');

   for(var i=0, n= machine.length; i<n; i++){
        if(machine[i].checked){
            vals.push(m2.value);
        }
    }
 }

Answer 1

您的m2在代碼中重復了兩次。 HTML規范在重復id（ m2 ）時指定了未定義的行為。 此外，您的選擇框不是多選。 在這種情況下，您應該只能夠直接從選擇框中獲取值。

Answer 2

ID必須是唯一的。

相反，您可以在現有的weight類上使用querySelectorAll（）來僅捕獲遵循已檢查input的select元素（使用常規的同級選擇器 ）：

document.querySelectorAll('input:checked ~ .weight')

select元素的值將與其選擇的選項的值相同。

片段

 document.querySelector('input[type=submit]').addEventListener('click', myAction); function myAction() { var vals = [], //no need for new Array() weights= document.querySelectorAll('input:checked ~ .weight'); for(var i = 0 ; i < weights.length ; i++) { vals.push(weights[i].value); } console.log(vals); } 

 <div class="outer"> <div class="inner" id="inner"> <input type="checkbox" name="machine" value="plane">I have a plane <br> <select class="weight" name="m2"> <option value="1">Light</option> <option value="2">Normal</option> <option value="3">Extra</option> </select> </div> <div class="inner" id="inner"> <input type="checkbox" name="machine" value="plane">I have 2 planes <br> <select class="weight" name="m2"> <option value="1">Light</option> <option value="2">Normal</option> <option value="3">Extra</option> </select> </div> </div> <input type="submit" value="Submit"> 

Answer 3

您還可以在嵌套節點上使用querySelector ，因此可以過濾已檢查輸入內容的div.inner塊，然后從那里獲取值：

function myAction() {
  //var vals = new Array();
  var inner = [].slice.call(document.querySelectorAll('.inner'));
  var checked = inner.filter(function(x) {

    var chk = x.querySelector('input');
    if (chk.checked) return x;
  })
  var vals = checked.map(function(x){
    var i = x.querySelector('select').value;
    return i
  });
}

順便說一句，正如里克（Rick）所說，您的標記包含一些錯誤，因此我建議您將其通過驗證器_

---

用於在input submit click事件上調用函數：

document.querySelector('input[type=submit').addEventListener('click', myAction)