Question

在提交按钮时，我想获取多个复选框的值，其中每个复选框都有单选按钮。我希望输出就像我检查复选框一个，并选择其相应的单选按钮 L ，复选框两个，并选择其相应的单选按钮 M ，选择< strong>三个并选择其相应的单选按钮 C ，并非必须选中所有复选框，一个可能会留空一些复选框。我只想获取所选项目及其对应的值。

 var allCheckedItem = []; 
 $.each(jQuery("input[name='teeth']:checked"), 
   function(){ allCheckedItem.push($(this).val()); 
 }); 
 for (var i = 0; i < allCheckedItem.length; i++) 
 { 
  var eachItem = allCheckedItem[i]; 
  console.log(eachItem);
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One" />One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" />M
    		<input name='a' type="radio" id="rb2" value="L" />L
    		<input name='a' type="radio" id="rb3" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" />M
    		<input name='b' type="radio" id="rb5" value="L" />L
    		<input name='b' type="radio" id="rb6" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" />M
    		<input name='c' type="radio" id="rb8" value="L" />L
    		<input name='c' type="radio" id="rb9" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4"  value="Four"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" />M
    		<input name='d' type="radio" id="rb11" value="L" />L
    		<input name='d' type="radio" id="rb12" value="C" />C
    	</span>
        </li>
        <li><input type="submit" name="submit" value="SAVE"></li>
    </ul>
    </form>

我希望输出应该是：一-> M，二-> C，三-> L

Answer 1

这是主题的另一种变化：

const getvals=()=>{var coll={};
 $(':radio:checked')
  .each((i,rb)=>
    $(rb).closest('li')
         .find(':checkbox:checked')
         .each((j,cb)=>coll[cb.value]=rb.value)
   )
 console.log(coll);
 return false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One" />One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" />M
    		<input name='a' type="radio" id="rb2" value="L" />L
    		<input name='a' type="radio" id="rb3" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" />M
    		<input name='b' type="radio" id="rb5" value="L" />L
    		<input name='b' type="radio" id="rb6" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" />M
    		<input name='c' type="radio" id="rb8" value="L" />L
    		<input name='c' type="radio" id="rb9" value="C" />C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4"  value="Four"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" />M
    		<input name='d' type="radio" id="rb11" value="L" />L
    		<input name='d' type="radio" id="rb12" value="C" />C
    	</span>
        </li>
        <li><input type="button" onclick="getvals()" value="SAVE"></li>
    </ul>
    </form>

Answer 2

强烈推荐阅读：Decoupling Your HTML, CSS, and JavaScript。

您将遇到的最大问题之一是仅适用于当前html的示例代码。如果您决定以几乎任何方式更改该html，则您的代码将停止工作（aka software brittleness）。以下代码是可扩展的（意味着添加更多复选框/收音机将很容易添加，可能不需要更改代码），并且应该易于理解。删除li或添加更多html不会导致此代码停止工作，因为它不依赖html结构。

$(document).ready(function() {
  $('.js-save').on('click', function(e) {
    var $btn = $(e.currentTarget);
    var $form = $btn.closest('form');
    var $pre = $('.debug');
    $pre.text('');
    $form.find('input:not(".ignore-value")').each(function(_,input) {
      var $input = $(input);
      var value = $input.val();
      if ($input.is('[type=checkbox]')) {
        value = $input.prop('checked');
      }
      var name = $input.prop('name');
      $pre.append('name: ' + name + ':' + value + '\n');
      if ($input.hasClass('js-associate-value') && value) {
        var associatedValue = $($input.data('target')).val();
        if (associatedValue) {
          $pre.append(' - ' + associatedValue + '\n');
        }
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <ul>
        <li>
    	<input name='teeth' type="checkbox" id="cb1" value="One"  class="js-associate-value" data-target="input[name=d]:checked"/>One
    	<span class="teethproblem1">
    		<input name='a' type="radio" id="rb1" value="M" class="ignore-value"/>M
    		<input name='a' type="radio" id="rb2" value="L" class="ignore-value"/>L
    		<input name='a' type="radio" id="rb3" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb2"  value="Two" class="js-associate-value" data-target="input[name=d]:checked"/>Two
    	<span class="teethproblem2">
    		<input name='b' type="radio" id="rb4" value="M" class="ignore-value"/>M
    		<input name='b' type="radio" id="rb5" value="L" class="ignore-value"/>L
    		<input name='b' type="radio" id="rb6" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb3"  value="Three" class="js-associate-value" data-target="input[name=c]:checked"/>Three
    	<span class="teethproblem3">
    		<input name='c' type="radio" id="rb7" value="M" class="ignore-value"/>M
    		<input name='c' type="radio" id="rb8" value="L" class="ignore-value"/>L
    		<input name='c' type="radio" id="rb9" value="C" class="ignore-value"/>C
    	</span>
        </li>
        <li>
    	<input name='teeth' type="checkbox" id="cb4" value="Four" class="js-associate-value" data-target="input[name=d]:checked"/>Four
    	<span class="teethproblem4">
    		<input name='d' type="radio" id="rb10" value="M" class="ignore-value" />M
    		<input name='d' type="radio" id="rb11" value="L" class="ignore-value" />L
    		<input name='d' type="radio" id="rb12" value="C" class="ignore-value" />C
    	</span>
        </li>
        <li><input class="js-save" type="button" name="submit" value="SAVE"></li>
    </ul>
    </form>
    <pre class='debug'></pre>

如何使用JavaScript或jQuery获取多个嵌套值？

2 个答案: