Question

我有一个标记<li class="pointer-cursor">abc<li>，我正在使用jQuery为其添加一个复选框

jQuery('.pointer-cursor').prepend('<input type = checkbox>');

结果是

<li class="pointer-cursor"> <input type="checkbox">abc </li> 我想使用jQuery增加复选框的可点击区域，以便无论我在哪里单击复选框都可以选中该复选框。

Answer 1

您可以在输入周围放置标签，以使其具有更大的单击区域。

$('.pointer-cursor').each(function(){
  $(this).html('<label><input type="checkbox">'+this.innerHTML +'</label>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="pointer-cursor">abc</li>
  <li class="pointer-cursor">123</li>
</ul>

Answer 2

您可以在文档中添加点击处理程序，以监听li标签上的点击，然后切换复选框的选中状态。

jQuery('body').on('click', 'li.pointer-cursor', function() {
  var input = $(this).find('input[type="checkbox"]');
  input.prop('checked', !input.prop('checked'));
});

Answer 3

只需在列出的项目上添加一个 onclick 事件，并附带一个功能即可切换您的复选框。

function onClick(){
  let checkbox = document.getElementById('check');
  checkbox.checked = !checkbox.checked;
}

<input id="check" type="checkbox">abc
<li onclick="onClick()">hi</li>

尝试使用jQuery增加复选框的可点击区域

3 个答案: