javascript - Jquery 获取选中的复选框

Question

您好，我想获取页面中选中复选框的列表，实际上我真正需要的是获取复选框旁边元素的文本，这是一个 html 元素 <li> 代码在下面，它不起作用

这是我当前的 jQuery:

$(document).ready(function () {
  $('#target').click(function () {
    alert("in");
    var checkValues = [];
    $('input[name=checkboxlist]:checked').each(function() {
      alert($(this)val());
      checkValues.push($(this)val());
    });
  });
});

这是 HTML:

<ul id="7b1fe2bd-1b26-4185-8cd9-aec10e652a70">
 <li>Structured Products<input type="checkbox" name="checkboxlist"</li>
 <li>Global FID
 <ul>
  <li>PowerPoint Presentations<input type="checkbox" name="checkboxlist"</li>
  <li>Global Deck
  <ul>
   <li>Test1<input type="checkbox" name="checkboxlist"</li>

   <li>Test2<input type="checkbox" name="checkboxlist"</li>
   <li>Test3<input type="checkbox" name="checkboxlist"</li>

  </ul>
  <input type="checkbox" name="checkboxlist"</li>
  <li>Credit Default Swaps Position
  <ul>
   <li>Test4<input type="checkbox" name="checkboxlist"</li>

   <li>Test5<input type="checkbox" name="checkboxlist"</li>

  </ul>
  <input type="checkbox" name="checkboxlist"</li>
  <li>Thought Leadership<input type="checkbox" name="checkboxlist"</li>
  <li>Fixed Income Perspectives<input type="checkbox" name="checkboxlist"</li>
  <li>Public Policy Information and Regulatory<input type="checkbox" name="checkboxlist"</li>

  <li>Regional FID<input type="checkbox" name="checkboxlist"</li>

 </ul>
 <input type="checkbox" name="checkboxlist"</li>
 <li>Global Rates<input type="checkbox" name="checkboxlist"</li>
 <li>Global Credit Products<input type="checkbox" name="checkboxlist"</li>
 <li>FX<input type="checkbox" name="checkboxlist"</li>

 <li>Emerging Markets<input type="checkbox" name="checkboxlist"</li>
 <li>Commodities<input type="checkbox" name="checkboxlist"</li>
 <li>testcat<input type="checkbox" name="checkboxlist"</li>
 <li>testcat<input type="checkbox" name="checkboxlist"</li>

</ul>

Answer 1

您的输入需要在末尾以 /> 结束，以使您的 HTML 有效，如下所示:

<input type="checkbox" name="checkboxlist" />

然后您可以像这样执行 jQuery 以获得文本数组:

$(function () {
  $('#target').click(function () {
    var checkValues = $('input[name=checkboxlist]:checked').map(function() {
        return $(this).parent().text();
    }).get();
    //do something with your checkValues array
  });
});​

You can see this working here

因为您只需要 parent 的 .text()对于您的布局，您可以使用 .map()快速获取基于选择器的属性数组。