jQueryの - 以下のようなUL李内部のリストがありますスパンクリック

Question

に李内側のチェックボックスの値を取得します。

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