jQuery 切换不适用于复选框，div 保持显示：块答案

【问题标题】：jQuery toggle won't work for checkbox, div remains display:blockjQuery 切换不适用于复选框，div 保持显示：块
【发布时间】：2018-07-17 04:56:26
【问题描述】：

我有一个输入复选框字段，当复选框更改（用户单击或取消单击）时，下面的 div 应该切换。在我的样式表中，我将 div paypalInputArea 作为 display:none 并且当单击复选框时，它应该切换，但是我似乎无法让它工作。谁能看到我的代码有什么问题？

这是我的html：

<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div> 

<div class="paypalInputArea">
    <isinclude template="includes/paymentmethodsinclude" /> 
</div>

这是我的 jQuery：

 $("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
                $(".paypalInputArea").toggle();
                if ($('.paypalInputArea').is(':visible')) {
                    app.paymentAndReview.setCOContinueBtn(true);
                    $("#paypalPaymentCheckbox").attr('checked','true');
                    $('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
                } else {
                    $("#paypalPaymentCheckbox").removeAttr('checked');
                    $('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
                    app.paymentAndReview.setCOContinueBtn(false);
                }
            });
            $("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);

【问题讨论】：

请上传一个示例小提琴以便我们检查它，它不是一个完整的代码，因为我找不到类名areaExpander

标签： javascript jquery html checkbox toggle

【解决方案1】：

$("#paypalCheckbox").on('change', function() {
        $(".paypalInputArea").toggle();
        if ($('.paypalInputArea').is(':visible')) {
            //app.paymentAndReview.setCOContinueBtn(true);
            $('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
        } else {
            $('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
            //app.paymentAndReview.setCOContinueBtn(false);
        }
    });
    $("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-row" id="paypalCheckbox">
    <input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
    <label class="paymentMethodTitle"></label>
</div> 

<div class="paypalInputArea" style="display:none">
    blabla
</div>

只需替换行：

$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {

与：

$("#paypalCheckbox").on('change', function() {

由于您有一个 ID（它必须是唯一的），因此您不必使用其他类或以其他方式访问它！

您也可以删除这些行，因为在用户单击复选框时设置了选中的属性

$("#paypalPaymentCheckbox").attr('checked','true');
$("#paypalPaymentCheckbox").removeAttr('checked');

希望这会有所帮助！

【讨论】：

【解决方案2】：

您的复选框中似乎缺少 areaExpander 类

【讨论】：