javascript - jquery 使用嵌套输入迭代列表项

Question

我有嵌套在列表项内的 anchor 内的输入。我想使用 jquery 迭代列表项，如果选择了某个项目，则在文本字段中显示值。我很接近，我已经到了输入控件，但是“if(检查)”语句不起作用。

有人可以告诉我我做错了什么吗？ :(

function ddDistrictChanged() {
  var txt = "nothing selected";
  var $inp = $('#ddDistrict').find('input');

  $inp.each(function (index) {
    $('#txtHere').text($(this).children('li'));
    if ($(this).checked) {
      txt = txt + ', ' + $(this).text();
    }
    
    $('#txtHere2').text(txt);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ddDistrict" class="dropdown-menu">
  <li><a href="#" class="small underlineText_No" data-value="1"><input name="selCol" type="checkbox" value="1">&nbsp;District 1 (Porter)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="2"><input name="selCol" type="checkbox" value="2">&nbsp;District 2 (Jones Jr.)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="3"><input name="selCol" type="checkbox" value="3">&nbsp;District 3 (Horne)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="4"><input name="selCol" type="checkbox" value="4">&nbsp;District 4 (Haddaway)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="5"><input name="selCol" type="checkbox" value="5">&nbsp;District 5 (Duncan)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="6"><input name="selCol" type="checkbox" value="6">&nbsp;District 6 (Willner)</a></li>
  <li><a href="#" class="small underlineText_No" data-value="7"><input name="selCol" type="checkbox" value="7">&nbsp;District 7 (Brady)</a></li>
  <li><button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddDistrictChanged();">Submit</button></li>
</ul>

<div id="txtHere"></div>
<div id="txtHere2"></div>

Answer 1

如果将文本包装在像 <span> 这样的元素中，会变得更干净。

<li><a ><input/><span>&nbsp;District 1 (Porter)</span></a></li>

接下来可以使用:checked伪选择器仅选择选中的输入

function ddDistrictChanged() {
  var txt = "nothing selected";
  var $items = $('#ddDistrict').find('li has(input:checked)');

  if ($items.length) {
    txt = $items.map(function() {
      return $(this).find('span').text()
    }).get().join(', ');
  }

  $('#txtHere2').text(txt);

}