jQuery-获取跨度单击li内复选框的值 [英] Jquery - Get value of checkbox inside li on span click

问题描述

在ul li内部有如下列表:

There is list inside ul li like below:

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

When user click on span I must get value of checkbox before this span. I wrote below code but it return undefined.

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

你能帮我吗?

推荐答案

您需要使用 find() 方法以获取其父级内部的复选框.

You need to use find() method to get the checkbox inside its parent.

此外，您可以使用 :checkbox 选择器来获取复选框元素比属性等于选择器更好，并且可以使用 val() 方法.

Additionally, you can use :checkbox selector to get checkbox element which would be better than the attribute equals selector and the value can be access using val() method.

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

这篇关于jQuery-获取跨度单击li内复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！