当前位置:网站首页>js中复选框checkbox如何判定为被选中

js中复选框checkbox如何判定为被选中

2022-07-07 13:53:00 爱学习的大雄

在学习的过程中触及到html分离式开发的内容,其中复选框checkbox判定选中对于ajax传数据来说十分重要,故将该篇文章转发留存,方便以后查阅。

要想判定复选框选中状态可以使用:

$("#test1").prop("checked")和$("#test1").is(":checked")1

1、checkbox中的checked属性

1.1 如果对于input标签,不设置其checked属性的话,默认是该复选框不被选中;

<input type="checkbox" name="test" id="test"/>  //未被选中1

1.2 而如果设置了checked属性的话,本人在js中测试的时候;

1)将checked属性设置为checked=true或者checked=”true”或者checked=”false”时,系统都会认为是该复选框被选中了。

<input type="checkbox" name="test" id="test1"/ checked=true>  //选中
<input type="checkbox" name="test" id="test2"/ checked="true">  //选中
<input type="checkbox" name="test" id="test3"/ checked="false">  //选中
<input type="checkbox" name="test" id="test4"/ checked >  //选中1234

2)在测试的时候,将checked属性设置为checked=false时,系统还是认为该复选框是未被选中的;

<input type="checkbox" name="test" id="test5"/ checked=false>  //未被选中1

***但是,当我们将checked属性设置为checked=false时,虽然在显示的时候,该复选框呈现的时候是未被选中,但是,如果我们使用如下代码的时候:

$("#test").prop("checked")以及$("#test").is(":checked")1

得到的值还是true(选中)。

2、使用 (.val())取值 —–不能用来判断复选框选中状态

<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked=true>  //选中12

我们使用console.log()将checked的取值打印出来,得到的结果如下:

无论是选中状态还是未被选中的状态,其取出的值都为on,所以要判定checkbox的选中状态,不能使用.val()取值

console.log($("#test").val())  //打印出on
console.log($("#test1").val())  //打印出on12

3、使用(.attr())取属性值 —–不能用来判断复选框选中状态

<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked>  //选中12

我们使用console.log()将checked的取值打印出来,得到的结果如下:

     无论是选中状态还是未被选中的状态,其取出的值都为undefine,所以要判定checkbox的选中状态,不能使用.attr()取值
1
console.log($("#test").attr())  //打印出undefine
console.log($("#test1").attr())  //打印出undefine12

4、使用(.prop())获取当前状态 ——可以用来判断复选框选中状态

<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked>  //选中12

我们使用console.log()将checked的取值打印出来,得到的结果如下:

选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.prop()取值

onsole.log($("#test").prop("checked"))  //打印出false
console.log($("#test1").prop("checked"))  //打印出true12

5、使用(.is())—-可用来判断复选框选中状态

<input type="checkbox" name="test" id="test"/> //未被选中
<input type="checkbox" name="test" id="test1"/ checked>  //选中12

使用$(“input[type=’checkbox’]”).is(‘:checked’)语句,通过使用console.log()将checked的取值打印出来,得到的结果如下:

选中的状态就得到true,未被选中的状态就得到false,所以要判定checkbox的选中状态,可以使用.is()取值

console.log($("#test").is(":checked"))  //打印出false
console.log($("#test1").is(":checked"))  //打印出true
原网站

版权声明
本文为[爱学习的大雄]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_49137582/article/details/125650365