javascript - 如何使按钮内的复选框可单击？

Question

$(".raw_data").click(function () {
   $("[name='raw_data']").prop("checked",!$("[name='raw_data']").is(':checked')).change();
});

<button class="raw_data" type="button">
    <input type="checkbox" name="raw_data">
        raw_data
</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

如您所见，当我单击按钮时，复选框运行良好，但是当我单击复选框本身时，它很糟糕......

那么，如何使按钮内的复选框可点击？

Answer 1

仅当您单击按钮内部但复选框外部时，才需要应用 .prop('checked')。

您可以通过检查 e.target 来做到这一点:if(!$(e.target).is('input'))。

此外，您不需要最后的 .change() 。

$(".raw_data").click(function(e) {
  if(!$(e.target).is('input')) $("[name='raw_data']").prop("checked", !$("[name='raw_data']").is(':checked'));
});

<button class="raw_data" type="button">
  <input type="checkbox" name="raw_data">
  raw_data
</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>