jQuery的 - 獲取內部李複選框的值跨度上點擊

Question

有UL李名單裏面象下面這樣：

<ul class="AllLayer"> 
    <li> 
     <fieldset id="layer0"> 
      <label class="checkbox" for="visible0"> 
       <input id="visible0" class="visible" type="checkbox" /> OSM 
      </label> 
      <span class="edit fa fa-pencil-square">eidt</span> 
     </fieldset> 
    </li> 
    <li> 
     <fieldset id="layer1"> 
      <label class="checkbox" for="visible1"> 
       <input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2 
      </label> 
      <span class="edit fa fa-pencil-square">eidt</span> 
     </fieldset> 
    </li> 
</ul> 

當跨度此之前，跨度，我必須獲取複選框的值，用戶點擊。 我寫下面的代碼，但它返回undefined。

$("span.edit").on('click', function() { 
    var value= (this).parent().siblings("input[type='checkbox']").attr("value"); 
    alert(value); 
}); 

你能幫助我嗎？

Answer 1

您需要使用find()方法獲取其父項中的複選框。

此外，您可以使用:checkbox選擇器來獲得比attribute equals selector更好的複選框元素，該值可以使用val()方法訪問。

$("span.edit").on('click', function() { 
 
    var value = $(this).parent().find(":checkbox").val(); 
 
    // or $(this).sblings().find(":checkbox").val() 
 
    // or $(this).prev().find(":checkbox").val() 
 
    alert(value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="AllLayer"> 
 
    <li> 
 
    <fieldset id="layer0"> 
 
     <label class="checkbox" for="visible0"> 
 
       <input id="visible0" class="visible" type="checkbox" /> OSM 
 
      </label> 
 
     <span class="edit fa fa-pencil-square">eidt</span> 
 
    </fieldset> 
 
    </li> 
 
    <li> 
 
    <fieldset id="layer1"> 
 
     <label class="checkbox" for="visible1"> 
 
       <input id="visible1" class="visible" type="checkbox" value="osm2" /> osm2 
 
      </label> 
 
     <span class="edit fa fa-pencil-square">eidt</span> 
 
    </fieldset> 
 
    </li> 
 
</ul>