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

Question

我想做的就是获取子元素中所有复选框的值，我看到了这个问题:How to retrieve checkboxes values in 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 demo .