获取子元素中所有复选框的值

Question

我想做的就是获取子元素中所有复选框的值，我看到了这个问题： 如何在 jQuery 中检索复选框值，但无法成功使其在子元素上工作

我的代码是这样的：

    <ul id="menu3" class="side_menu expandfirst noaccordion">

      <li>
        <div class="refine_att"><a href="#" name="Expand/Collapse">Price</a></div>         
           <ul class="check">
             <li><input onclick="updateTextArea()" id="_1" type="checkbox"><a href="#"> £0.00 - £9.99 </a></li>
             <li><input onclick="updateTextArea()" id="_2" type="checkbox"><a href="#"> £10.00 - £99.99 </a></li>
             <li><input onclick="updateTextArea()" id="_3" type="checkbox"><a href="#"> £100.00 - £249.99 </a></li>
             <li><input onclick="updateTextArea()" id="_4" type="checkbox"><a href="#"> £250.00 - £499.99 </a></li>
             <li><input onclick="updateTextArea()" id="_5" type="checkbox"><a href="#"> £500.00 - £999.99 </a></li>
           </ul>
         </div>
        </li>

     </ul>

也可能有多个“refine_att”列表，我在这里只显示了一个

 function updateTextArea() {
        var allVals = [];

        $('#menu3').find(":checked").each(function() {
            allVals.push($(this).val());
        });
        $('#t').val(allVals)
    }

Answer 1

您可以尝试以下操作：

function updateTextArea() {
    var vals = $('#menu3 input:checkbox:checked').map(
        function(){
            return this.id + ': ' + $(this).val();
        }).get().join(', ');
    $('#t').text(vals);
}

$('input:checkbox').change(
    function(){
        updateTextArea();
    });

JS Fiddle 演示。

Answer 2

难道您不应该检查复选框值的任何数据，而不是检查标签的内部 html 吗？另外，我会去掉 onclick，并对 ul 内的所有复选框进行 jquery 搜索。像（请注意，我添加了一个 id，并向复选框添加了值）：

<ul class="check" id="ul_check">
 <li><input id="_1" type="checkbox" value="0"><a href="#"> £0.00 - £9.99 </a></li>
 <li><input id="_2" type="checkbox" value="10"><a href="#"> £10.00 - £99.99 </a></li>
 <li><input id="_3" type="checkbox" value="100"><a href="#"> £100.00 - £249.99 </a></li>
 <li><input id="_4" type="checkbox" value="250"><a href="#"> £250.00 - £499.99 </a></li>
 <li><input id="_5" type="checkbox" value="500"><a href="#"> £500.00 - £999.99 </a></li>
</ul>

jQuery：

$('#ul_check input:checkbox').change(
 function(){
  var strSelectedVals = $('#ul_check input:checkbox:checked').map(
   function(){
    return $(this).val();
   }).get().join(',');
  $('#t').val(strSelectedVals );
 });

jQuery 对 id="ul_check" 元素内的复选框进行所有单击更改，以获取在id="ul_check" 元素，然后创建一个附加（“粘合”）字符串，并在值之间使用逗号“,”。如果每个复选框中没有 onClick，您就可以将 jQuery/javascript 与 HTML 分开，因此一切都变得更清晰且可监督。另外，jQuery 可以在 class="check" 上工作，但随后它会检查该类的其他元素，因此 ID 更适合这个 jQuery 建议。我假设您有一个元素，而不是文本区域？如果是文本区域，请使用：

$('#t').text(strSelectedVals);

strSelectedVals 将包含类似“0,10,100”的内容，具体取决于您选择的复选框。 （使用 PHP，如果您愿意，您可以执行explode(",", $POST["[...]"]) 来获取所有值，等等...）