jQuery的eq选择器+全选和反选

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

土土tu

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

阅读量409

点赞数 1

文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/weixin_57206717/article/details/120447893

版权

<!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>
<body>
<table border="2">
<tr>
<td><input type="checkbox" value="1"></td>
<td>豹女</td>
<td>300</td>
</tr>
<tr>
<td><input type="checkbox" value="2"></td>
<td>龙女</td>
<td>300</td>
</tr>
<tr>
<td><input type="checkbox" value="3"></td>
<td>提摩</td>
<td>320</td>
</tr>
<tr>
<td><input type="checkbox" value="4"></td>
<td>琴女</td>
<td>350</td>
</tr>
</table>

<input type="button" value="点击选择第几个使用eq选择器" id="eqBtn">
<input type="button" value="点击选择第1个使用first选择器" id="firstBtn">
<input type="button" value="点击选择最后一个使用first选择器" id="lastBtn">
<input type="button" value="全选" id="allBtn">
<input type="button" value="点击查看,已经选中的" id="checkedBtn">
<input type="button" value="点击查看,没有选中的" id="nocheckedBtn">
<input type="button" value="反选" id="overBtn">
<input type="button" value="反选升级版" id="overBtn1">

<script>
$(function() {
//jquery使用过滤选择器达到奇偶数变色
//同时也学了 jquery操作css
$('table tr:even').css('background-color','pink');
$('table tr:odd').css('background-color','blue');

$('#eqBtn').click(function() {
var timo=$('table tr:eq(3)');
//console.log(timo);
//练习：如何找到 <td>提摩</td>
//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() {
//思路：找出所有 cheackbox 的td,遍历，让其选中即可
// $('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($(this).val());
})

})

//点击查看没有选中的
$('#nocheckedBtn').click(function() {
console.log($('table tr td>input:not(:checked)').val());

})

//反选
$('#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>

土土tu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的eq选择器+全选和反选

<!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...
复制链接

扫一扫