Question

我有嵌套在嵌套在列表项内的锚点内的输入。我想使用jquery遍历列表项，如果选择了项，则在文本字段中显示值。我关闭了，我是输入控件，但是＆＃34; if（选中）＆＃34;声明不起作用。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

}

Answer 2

<强> Working JSFiddle DEMO

首先，让我们重构HTML，以便在使用JavaScript / jQuery时更容易与之交互。我选择使用带有输入的标签而不是<a>标签。

<ul class="ddDistrict dropdown-menu">
  <li>
    <input type="checkbox" id="cbox1" value="1" checked>
    <label for="cbox1" class="small underlineText_No">District 1 (Porter)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox2" value="2">
    <label for="cbox2" class="small underlineText_No">District 2 (Jones Jr)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox3" value="3">
    <label for="cbox3" class="small underlineText_No">District 3 (Horne)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox4" value="4">
    <label for="cbox4" class="small underlineText_No">District 4 (Haddaway)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox5" value="5">
    <label for="cbox5" class="small underlineText_No">District 5 (Duncan)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox6" value="6">
    <label for="cbox6" class="small underlineText_No">District 6 (Willner)
</label>
  </li>
  <li>
    <input type="checkbox" id="cbox7" value="7">
    <label for="cbox7" class="small underlineText_No">District 7 (Brady)
</label>
  </li>
  <li>
    <button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddDistrictChanged();">Submit</button>
  </li>
</ul>

<div class="txtHere"></div>

然后我创建了一些基本的JavaScript / jQuery来检查是否在加载时检查了任何复选框，并根据已检查的内容以及检查它们来更新DOM。

var $inputs = $('.ddDistrict input');
var $outputWrapper = $('.txtHere');

// Check for boxes that have already been checked and
// append their labels to the DOM.
$inputs.each(function() {
  var currentLabel = $(this).next('label').text();
  var currentID = $(this).attr('id');

  if (this.checked) {
    var outputText = $('<p></p>').addClass(currentID).text(currentLabel);
    $outputWrapper.append(outputText);
  }
});

// This event handler will watch for any changes to the
// checkboxes and will append the value of their labels
// to the DOM on change.
$inputs.change(function() {
  var currentLabel = $(this).next('label').text();
  var currentID = $(this).attr('id');

  if (this.checked) {
    var outputText = $('<p></p>').addClass(currentID).text(currentLabel);
    $outputWrapper.append(outputText);
  } else {
    $('.' + currentID).remove();
  }
});

这些都是相对简单的东西，代码可以重构以使其更干，但这绝对应该让你朝着正确的方向前进。如果您有任何疑问，请告诉我。

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

2 个答案: