从特定的li获取复选框值

Question

我有以下html结构。我可以选择<li>，但无法获得复选框值-它是undefined

<ul>
    <li class="selected" style="false">
        <label class="">
            <input type="checkbox" data-name="selectItem" value="2447"> 
            <span>England</span>
        </label>
    </li>
</ul>

$('ul li.selected').each(function () {
    console.log('li.selected');
    var val = $(this).closest('label').find('[type=checkbox]').val();
    console.log(val);                                        
});

Answer 1

closest()向上移动DOM，如果您想向下移动，则应该使用find()。还要注意，您可以在对find()的单个调用中实现所需的功能。试试这个:

$('ul li.selected').each(function () {
    var val = $(this).find('label :checkbox').val();
    console.log(val);                                        
});

Answer 2

每个$(this)里面都是li元素，所以试试这个:

 $('ul li.selected').each(function () {
            console.log("li.selected");
            var val = $(this).find(":checkbox").val();
            console.log(val);                                        
        });

Answer 3

试着这样修改你的代码:

 $('li.selected').each(function () {
            console.log("li.selected");
            var val = $(this).find("label").find('input[type=checkbox]').val();
            console.log(val);                                        
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="selected" style="false">
    <label class="">
          <input type="checkbox" data-name="selectItem" value="2447"> 
          <span>England</span>
    </label>
</li>

Answer 4

直接搜索复选框:val = $(this).find('input[type=checkbox]').val();

$('ul li.selected').each(function() {
  console.log("li.selected");
  var val = $(this).find('input[type=checkbox]').val();
  console.log(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="selected" style="false">
    <label class="">
      <input type="checkbox" data-name="selectItem" value="2447">
      <span>England</span>
    </label>
  </li>
</ul>

Answer 5

您可以直接在$(this):

中.find()输入type="复选框"

$('ul li.selected').each(function () {
  console.log('li.selected');
  var val = $(this).find(':checkbox').val();
  console.log(val);                                        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="selected" style="false">
        <label class="">
              <input type="checkbox" data-name="selectItem" value="2447"> 
              <span>England</span>
        </label>
    </li>
</ul>