Question

<div class="todo-task"> 
    <input type="checkbox" id=' checkbox1' /> 
    <label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete"></span> 
    </label> 
</div>

当我点击span项目时，我想要复选框的id值。我怎么能得到它？

Answer 1

遍历已包含复选框的已知父级，找到复选框，然后获取ID属性。

$('span.todo-remove').on('click', function() {
    var id = $(this).closest('.todo-task').find('input:checkbox').attr('id');
    // do something with id
});

Answer 2

向上导航然后搜索

$('span').click(function() {
  var parent = $(this).closest('.todo-task');//navigate up
  var input = parent.find('input[type="checkbox"]');//search
  var id = input.attr('id');
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="todo-task">
  <input type="checkbox" id=' checkbox1' />
  <label for='checkbox1 '>hellooooo <span class="todo-remove mdi-action-delete">in span</span> 
  </label>
</div>

Answer 3

jQuery的： $('.todo-remove').closest('.todo-task').find('input').attr('id')

Answer 4

jQuery的.parent()-method导航到label级别，然后.siblings()-method选择与选择器匹配的兄弟姐妹。最后，您可以使用attr()来获取实际值。

$(".todo-remove").on('click', function() {
    var id = $(this).parent().siblings("input[type='checkbox']").attr("id");
});

JSFiddle：http://jsfiddle.net/d0cekb6p/

Answer 5

$(function() {
      $('.todo-remove').on('click', function() {
          var checkID = $(this).closest('div.todo-task').find(':checkbox').prop('id');
          console.log( checkID );
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="todo-task"> 
    <input type="checkbox" id=' checkbox1' /> 
    <label for='checkbox1 '> hellooooo <span class="todo-remove mdi-action-delete">X</span> 
    </label> 
</div>

如何通过单击span获取最近的复选框项的ID

5 个答案: