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

妖狐艹你老母 2023-09-28 13:59 1阅读 0赞

在学习的过程中触及到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