当复选框被选中时设置布尔变量

Setting boolean variable when checkbox is clicked

本文关键字：设置 布尔 变量 复选框      更新时间：2023-09-26

我得到了一些HTML，比如一个Bootstrap复选框。默认情况下，复选框是打开的。

    <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。

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

我想知道我做错了什么?

这是我引用的线程

你需要给你的复选框它自己的ID，这样你就可以确定它是否被选中。现在您正在测试是否检查了div(这是不可能的)-您要做的是检查是否检查了input元素!

Working Live Demo: 

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/

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);
});

首先将所有未检查设置为false。

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

$('#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>

使用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>

如果我要这样做，我真的不会使用JQuery。简单点就好。

document.getElementById("checkboxId").checked;

如果你不需要使用JQuery，只需要使用这个变量

相关文章：