jQuery试图检查一个复选框

Question

我试图单独检查一个带有jquery的复选框，然后执行return false，因为我不想影响其他的jquery方法。 但是由于某种原因，该复选框没有选中或取消选中。 我需要在其中返回return false，因为还有其他功能会影响复选框的外部元素。

 $("#p h1 input").click(function (event) {

    if ($(this).is(':checked'))
    {
        $(this).prop('checked', false);
    }
    else
    {
        $(this).prop('checked', true);
    }

    return false;
});

好的，我在H1上也有这个

$("#p h1").click(function (event) {
        $(this).next(".content").slideToggle();

        if ($(this).hasClass("on")) {
            $(this).find("span").addClass("fa-angle-up");
            $(this).find("span").removeClass("fa-angle-down");
        }
        else {
            $(this).find("span").removeClass("fa-angle-up");
            $(this).find("span").addClass("fa-angle-down");
        }

        $(this).toggleClass("on");
    });

该复选框位于h1内部。

我不希望在单击复选框时发生滑动功能或第二单击事件中的任何事件。

这是HTML

<h1>Set<span class="fa fa-angle-up"></span>@Html.CheckBoxFor(model => model.Confirm)</h1>

Answer 1

我不希望在单击复选框时发生滑动功能或第二单击事件中的任何事件。

在这种情况下，您可以检查事件的target是什么，如果是复选框，则不执行逻辑。 为此，您可以使用jQuery的is()函数。

还要注意，只需使用toggleClass()即可简化if逻辑。 尝试这个：

 $("#p h1").click(function(e) { if ($(e.target).is(':checkbox')) return; var $h1 = $(this); $h1.next(".content").slideToggle(); $h1.toggleClass('on').find('span').toggleClass('fa-angle-up fa-angle-down'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <div id="p"> <h1 class="on"> Set <span class="fa fa-angle-up"></span> <input type="checkbox" name="Confirm" /> </h1> </div>