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
  });
});​

Вы можете увидеть это работает здесь

Поскольку все, что вам нужно, это родительский элемент .text() с вашим макетом, вы можете использовать .map(), чтобы быстро получить массив свойств на основе селектора.

Answer 2

$("input[type=checkbox]:checked").parent().text()

Answer 3

Прежде всего вы должны закрыть свой флажок

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

должно быть

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

Я думаю, из вашего HTML вы можете получить текст lis, который будет желательным текстом

$(function(){
    $('#target').click(function(){
        var selected = new Array();
        $("input:checkbox[name=checkboxlist]:checked").each(function(){
            var val = $(this).closest("li").text();
            selected.push(val);
        });
    });
});

Answer 4

Вы неправильно закрываете свои теги ввода. Кроме того, $(this)val() должно быть $(this).val().

Если вы намереваетесь получить текст элемента li, который содержит элемент ввода, вы можете написать так:

$(this).parents("li:first").text();