简体   繁体   中英

jquery to iterate through list items with nested inputs

I have inputs nested inside of anchors nested inside of list items. I'd like to use jquery to iterate through the list items, and if an item was selected display the values in a text field. I'm close, I'm down to the input control, but the "if (checked)" statement is not working.

Can somebody please tell me what I'm doing wrong? :(

 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> 

Would make it cleaner if you wrapped the text in an element like <span>

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

Next can use :checked pseudo selector to select only checked inputs

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

}

Working JSFiddle DEMO

To start with, lets refactor your HTML to make it a bit easier to interact with when using JavaScript/jQuery. I have opted to use labels with your inputs instead of <a> tags.

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

I then created some basic JavaScript/jQuery to check if any checkboxes have been checked on load and update the DOM according to what has been checked, and when they are checked.

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

It's all relatively simple stuff and the code can be refactored to make it more DRY, but this should definitely put you in the right direction. Let me know if you have any questions.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM