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

Question

提交按钮时，我想获取多个复选框的值，其中每个复选框都有单选按钮。我希望如果我检查的话输出会像这样 复选框One并选择其相应的单选按钮L，复选框Two并选择其相应的单选按钮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>