Question

我有一些类似于Bootstrap复选框的HTML。默认情况下，该复选框处于打开状态。

    <div id="full" class="checkbox">
        <label>
            <input type="checkbox" checked=""> Include Full Classes
        </label>
    </div>

我有这个jQuery检测项目是否已选中或未经检查

        var full;
        $('#full').change(function(){
            if(this.checked)
            {
                full = true;
                console.log(full);
            } else {
                full = false;
                console.log(full);
            }
        });

我想要实现的是，当选中该复选框时，它会将full设置为1，如果未选中，则将full设置为0.

我对console.log()变量执行了full，在我的输出中，我得到的只是false。

我想知道我做错了什么？

这是我引用的thread

Answer 1

您需要为您的复选框指定自己的ID，以便确定是否已选中。现在你正在测试div是否被选中（这是不可能的） - 你要做的是检查是否检查了input元素！

现场演示：

var full;
$('#checkbox').change(function() {
  full = this.checked;
  console.log(full);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="full" class="checkbox">
  <label>
    <input id="checkbox" type="checkbox" checked="">Include Full Classes
  </label>
</div>

JSFiddle示例：https://jsfiddle.net/qtczor1q/2/

Answer 2

this.checked的输出boolean应该可以解决问题

var full;
$('#full').change(function(){
   full = this.checked  ? 1 : 0 ; 
   //or using jquery 
   // full = $(this).is(':checked') ? 1 : 0;
   console.log(full);
});

Answer 3

首先将所有未选中设置为false。

 var $checked = $(':checkbox');
    $checked.not(':checked').attr('value', 'false');
    $checked.change(function(){
        $clicked = $(this); 
        $clicked.attr('value', $clicked.is( ":checked" ));
    });

Answer 4

$('#full')不是复选框，而是div。您想查看 div中的复选框。

var full; var cb = $('#full input[type=checkbox]'); cb.change(function() { if (cb.prop('checked')) { full = true; console.log(full); } else { full = false; console.log(full); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="full" class="checkbox"> <label> <input type="checkbox" checked="">Include Full Classes </label> </div>

Answer 5

使用if语句对我来说太过分了。正如@joyBlanks正确指出的那样，如果你要找的是真或假，那么this.checked就是你所需要的。但是如果你想要1或0，那么使用三元运算符。

$(':checkbox').on('change', function() {
    console.log( this.checked ); //true or false
    console.log( this.checked ? 1 : 0 ); //1 or 0
})
//trigger change event when the page loads -- checkbox is checked when page loads
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="full" class="checkbox">
        <label>
            <input type="checkbox" checked=""> Include Full Classes
        </label>
    </div>

Answer 6

如果我这样做，我会诚实地不使用JQuery。只是做到这一点。

document.getElementById("checkboxId").checked;

如果您不需要使用JQuery，只需使用此变量。

单击复选框时设置布尔变量

6 个答案: