Jquery 比较复选框的原始状态和更改状态

Question

我想做的是，我想保留复选框的值（原始状态），然后在复选框状态更改时检查状态是否不是原始状态，然后显示文本区域。

到目前为止我做了什么

<script>
    var status = $('#status').val();
    $(document).ready(function() {
        status = $('#status').is(":checked");
        $('#status').on('click', function() {
           if( $('#status').is(":checked")!=status){
               $('#mandatory').html('*');
           }else{
               alert("else");
               $('#mandatory').html('');
           }
        });
    });
</script>

我面临的问题是它没有比较两个值。

Answer 1

$(document).ready(function() {
    var status = $('#status').is(":checked"); // Get default status

    $('#status').on('change', function() {
        // On change the state of checkbox
        var html = ($(this).is(':checked') !== status) ? '*' : '';
        $('#mandatory').html(html).toggle(!!html); // Set the value and toggle(show/hide) the textarea
    });
});

Answer 2

您可以试试下面的代码：

$(document).ready(function() {
    var default_status = $('#status_check').is(":checked"); 

    $('#status_check').on('change', function() {
        
        if($(this).is(':checked') == default_status ) {
           // Hide Text box
            $('#field').hide();
        } else {
            // Show text box
             $('#field').show();
        }
        
    });
});

<input type="checkbox" class="store_value" id="status_check"><br />
<input type="text" id="field" class="field" style="display:none;" />

JS Fiddle

Jquery 比较复选框的原始状态和更改状态

Jquery Compare original state of checkbox with change state

checkbox

jquery