Question

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，当我点击按钮时，该复选框效果很好，但是当我单击复选框本身时，它很糟糕......

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

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>

Answer 2

使用此按钮点击按钮切换复选框：

        $(".raw_data, .raw_data > input").click(function () {
            var input = $(this).find("input").length ? $(this).find("input") : $(this)
            input.prop("checked", !input.prop("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>

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

2 个答案: