javascript - 如何仅获取选定复选框的选项值？

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

ID 必须是唯一的。

相反，您可以使用 querySelectorAll() 在现有的 weight 类上仅获取已检查的 input 后面的 select 元素(使用 general sibling selector ):

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