jquery全选反选

最新推荐文章于 2024-04-13 16:36:52 发布

hyg.

最新推荐文章于 2024-04-13 16:36:52 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/m0_59776219/article/details/119741830

版权

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>

$(function () {
//jquery使用过滤选择器，奇偶变色，同时也学习了jquery操作css
$('table tr:even').css('background', 'pink');
$('table tr:odd').css('background', 'orange');

$("#eqBtn").click(function () {
var timo = $("table tr:eq(2) td:eq(1)").text(); //拿到提摩的值
console.log(timo);
});
//拿取第一个
$("#firstBtn").click(function () {
var first = $('table tr:first').html();
console.log(first);
});
//拿取最后一个
$("#lastBtn").click(function () {
var last = $('table tr:last').text();
console.log(last);
});
//全选---适用于批量删除
$("#allBtn").click(function () {
//思路：找出所有CheckBox的td，遍历，让其选中即可
// console.log($('table tr td>input'));
$.each($('table tr td>input'), function(index, value) {
// console.log(index);
// console.log(value);
console.log($(this).val()); //遍历取值
$(this).prop("checked",true); //全选
})
});
//点击查看已经选中的
$("#checkedBtn").click(function () {
//使用过滤选择器可以选中
// $("table tr td>input:checked");
//遍历取值
$.each($("table tr td>input:checked"), function(index, value) {
// console.log(index);
// console.log(value);
console.log($(this).val()); //遍历取值
})
});
//点击查看没有选中的
$("#nocheckedBtn").click(function () {
console.log($("table tr td>input:not(:checked)"));
});
//反选
$("#overBtn").click(function () {
//思路：遍历每一个input，如果是选中的，则给予未选中
//反过来，如果是未选中，则给予选中
$.each($("table tr td>input"), function(index, value) {
var istrue = $(this).prop('checked');
console.log(istrue);
if(istrue){
//如果istrue等于true代表被选中
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
})
});
//升级版全选反选最少的代码搞定
$("#overBtn1").click(function () {
$.each($("table tr td>input"), function(index, value) {
$(this).prop('checked',!($(this).prop('checked')));
})
});

})
</script>

</body>

</html>

hyg.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery全选反选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
复制链接

扫一扫