Question

我有一个输入复选框字段，当复选框更改（用户单击或取消单击）时，下面的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);

Answer 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');

希望这会有所帮助！

Answer 2

您似乎在复选框中缺少课程areaExpander

jQuery切换不适用于复选框，div仍然显示：block

2 个答案: