Question

我试图在单击复选框（不同的跨度标签）并显示复选标记时将带有“首选”文本的跨度标签附加到div中。取消选中该选项后，带有“ Preferred”（首选）文本的span标签应该消失。

但是，我很难正确设置条件，因为它一直进入到第二个条件，即未单击或不显示选中标记。

    $("#pref-a").unbind().click(function() {
        if ($(this).is(':checked')) {
            // $(this).attr('value', 'true');
            $(this).attr('checked', true);
            $("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
        } else {
            // $(this).attr('value', 'false');
            $(this).attr('checked', false);
            $("#pref-value1").children("span").remove();
        }
    });

    /* The container */
    
    .container {
        position: relative;
        padding-left: 35px;
        /*margin-bottom: 16px;*/
        cursor: pointer;
        font-size: 15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* Hide the browser's default checkbox */
    
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    /* Create a custom checkbox */
    
    .checkmark {
        position: absolute;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }
    /* On mouse-over, add a grey background color */
    
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }
    /* When the checkbox is checked, add a blue background */
    
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    /* Show the checkmark when checked */
    
    .container input:checked ~ .checkmark:after {
        display: block;
    }
    /* Style the checkmark/indicator */
    
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    #Pref {
        display: table-cell;
        vertical-align: middle;
        height: 50px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pref-value1" class="form-group Pref">
    <label class="container">
        <input id="checkbox1" name="preferred1" type="checkbox" value="false">
        <span id="pref-a" class="checkmark" style="margin: -2px 1px;" />
    </label>
</div>

我尝试了许多不同的条件，例如：

($(this).prop(':checked')) or ($(this).is(':checked')) == false

但是，它会导致相同的问题，或者会添加带有“ Preferred”文本的多个span标签。

有人可以指导我吗？另外，即使最初已经有一个选中标记，我如何使该功能正常工作？

Answer 1

如果我正确理解了您的问题，则好像您几乎已经知道了。在您的JS中，您会在span标记（而不是input标记）上监听click事件。

尝试使用此JS。我首先获取复选框（输入）的ID，而不是span标签。

$("#checkbox1").click(function() {
        if ($(this).is(':checked')) {
                // $(this).attr('value', 'true');
            $(this).attr('checked', true);
            $("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
        } else {
            // $(this).attr('value', 'false');
            $(this).attr('checked', false);
            $("#pref-value1").children("span").remove();
        }
    });

Answer 2

您的JS代码运行良好，只是您需要通过<input id="checkbox1" ... >定位$("#checkbox1").unbind().click(...)而不是<span>

  $("#checkbox1").unbind().click(function() {
        if ($(this).is(':checked')) {
            // $(this).attr('value', 'true');
            $(this).attr('checked', true);
            $("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
        } else {
            // $(this).attr('value', 'false');
            $(this).attr('checked', false);
            $("#pref-value1").children("span").remove();
        }
    });

    /* The container */
    
    .container {
        position: relative;
        padding-left: 35px;
        /*margin-bottom: 16px;*/
        cursor: pointer;
        font-size: 15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* Hide the browser's default checkbox */
    
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    /* Create a custom checkbox */
    
    .checkmark {
        position: absolute;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }
    /* On mouse-over, add a grey background color */
    
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }
    /* When the checkbox is checked, add a blue background */
    
    .container input:checked ~ .checkmark {
        background-color: #2196F3;
    }
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    /* Show the checkmark when checked */
    
    .container input:checked ~ .checkmark:after {
        display: block;
    }
    /* Style the checkmark/indicator */
    
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    #Pref {
        display: table-cell;
        vertical-align: middle;
        height: 50px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pref-value1" class="form-group Pref">
    <label class="container">
        <input id="checkbox1" name="preferred1" type="checkbox" value="false">
        <span id="pref-a" class="checkmark" style="margin: -2px 1px;" />
    </label>
</div>

Answer 3

您检查了错误的元素。

尝试使用正确的选择器代替this。在您的情况下，这是对span元素的引用，而不是对checkbox元素的引用

例如

 $("#checkbox1").is(':checked')

如何正确设置div复选标记的条件？

3 个答案: