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() 来仅抓取已检查select后面的input元素（使用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">

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
  });
}

BTW，因为Rick说你的标记包含一些错误所以我建议将它传递给验证器_

在click input的{{1}}事件中调用您的函数：

submit

如何获取所选复选框的选项值？

3 个答案: