獲取特定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

裏面的每個$（這）是鋰元素，所以試試這個：

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

Answer 2

嘗試改變你的代碼是這樣的：

$('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 3

closest()上升的DOM，你應該使用find()而不是你想要的。另請注意，您可以在find()的單個電話中實現所需的功能。試試這個：

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

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

您可以直接在.find()內input type="checkbox"的$(this)：

$('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>