jQuery对象的遍历的三种方法之对多选框select反选

最新推荐文章于 2024-09-25 14:36:07 发布

haima2416

最新推荐文章于 2024-09-25 14:36:07 发布

阅读量1.4k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u010924692/article/details/78267780

版权

jQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对象的遍历</title>
<script type="text/javascript" src='./js/jquery.js'></script>
</head>
<body>
<h1>遍历jQuery对象的内部的DOM对象</h1>
<input type="button" value="反选" οnclick="fan()" />
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
</body>
<script type="text/javascript">

//方法一面向过程的思路
function fan(){
var inp=$('input:checkbox');//获取input 取出的是jq对象
for(var i=0;i<inp.length;i++){ //循环取出每一行的input
//判断input是否有checked 这里inp[i]是dom对象,还要加$()转成dom对象
if($(inp[i]).prop('checked')==true){
$(inp[i]).prop('checked',false);//改checked值为folse
}else {
$(inp[i]).prop('checked',true); 改checked值为true
}
}
}

//方法二面向函数式的思路，回调函数
function fan(){

$('input:checkbox').each(function(){
console.log(this);
//console.log($('input:checkbox'));
if($(this).prop('checked')==true){
$(this).prop('checked',false);//改checked值为folse
}else {
$(this).prop('checked',true); 改checked值为true
}
});
}

//方法三更简化的方式，直接对自己取反
function fan(){
$('input:checkbox').each(function(){
this.checked=!this.checked;
});
}
</script>
</html>