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

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建议。我假设你有一个元素，而不是textarea？如果是textarea，请使用：

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

strSelectedVals将包含类似“0,10,100”的内容，具体取决于您选择的复选框。（使用PHP，你可以，如果你愿意，然后做一个爆炸（“，”，$ POST [“[...]”]）来获取所有的值等等。）

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

2 个答案: