jquery中checked用法
在jQuery中,`checked`用于操作和判断复选框和单选框的选中状态。它可以设置和获取元素的选中状态,并且可以通过事件来监听和响应选中状态的改变。
**设置和获取选中状态**
要设置一个复选框或单选框的选中状态,可以使用`prop`方法,并将`checked`属性设置为`true`或`false`:
```javascript
$("#myCheckbox").prop("checked", true); // 设置为选中状态
$("#myCheckbox").prop("checked", false); // 设置为未选中状态
```
使用`prop`方法获取复选框或单选框的选中状态时,将`checked`属性作为参数传递给`prop`方法:
```javascript
var isChecked = $("#myCheckbox").prop("checked"); // 获取选中状态
```
`prop`方法在jQuery 1.6+中是推荐使用的方法,它比`attr`方法更高效。
**事件监听选中状态变化**
可以使用`change`事件来监听复选框或单选框的选中状态变化。当复选框或单选框的选中状态改变时,`change`事件将会被触发。
```javascript
$("#myCheckbox").change(functio
if($(this).is(":checked"))
jquery是什么有什么作用//复选框被选中
} else
//复选框被取消选中
}
});
```
在事件处理函数中,可以通过`is`方法判断元素是否被选中。如果元素被选中,`is(":checked")`将返回`true`,如果元素未被选中,`is(":checked")`将返回`false`。
**遍历选中的复选框或单选框**
如果页面上有多个复选框或单选框,并且想要获取选中的复选框或单选框的值,可以使用`each`方法遍历这些元素,并通过`is(":checked")`判断元素是否被选中。
```javascript
$("input[type='checkbox']:checked").each(functio
var value = $(this).val(; // 获取选中复选框的值
//执行其他操作...
});
```
上述代码中,选择器`input[type='checkbox']:checked`将会匹配所有选中的复选框,并通过`each`方法遍历这些元素。在事件处理函数中,`$(this)`将指向当前遍历的复选框元素。
**全选/全不选**
如果有一个“全选”复选框用于控制其他复选框的选中状态,可以通过监听“全选”复选框的改变事件,然后通过`prop`方法设置其他复选框的选中状态。
HTML结构示例:
```html
<input type="checkbox" id="selectAll"> 全选
<input type="checkbox" class="checkbox-group"> 选项1
<input type="checkbox" class="checkbox-group"> 选项2
<input type="checkbox" class="checkbox-group"> 选项3
```
jQuery代码示例:
```javascript
$("#selectAll").change(functio
var isChecked = $(this).is(":checked");
$(".checkbox-group").prop("checked", isChecked);
});
```
上述代码中,当“全选”复选框的选中状态改变时,事件处理函数将会被触发。在事件处理函数中,首先通过`is(":checked")`获取“全选”复选框的选中状态,然后通过`prop`方法设置其他复选框的选中状态。
总结:`checked`在jQuery中是用于操作和判断复选框和单选框的选中状态的属性。可以使用`prop`方法来设置和获取选中状态,使用`change`事件监听选中状态的改变,使用`each`方法遍历选中的复选框或单选框,使用`prop`方法设置复选框或单选框的选中状态。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论