Question

如下所示，ul li中有列表：

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

当用户点击span时，我必须在此跨度之前获得复选框的值。我在下面写了代码，但它返回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>

Jquery - 在span单击时获取li里面的复选框值

1 个答案: