jq 操作表单中 checkbox 全选单选

最新推荐文章于 2023-04-03 08:36:43 发布

weixin_34015860

最新推荐文章于 2023-04-03 08:36:43 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaomaotao/p/9803987.html

版权

知识点：

Note:

1：

　　.prop() 和 .attr() 方法的区别

　　　　.prop() 针对标签既有属性

　　　　.attr() 针对自定义属性

$('input:checked')即为选中元素。

---------------------------------------------------

场景——项目管理需求如下图：

选中全部或部分成果名称跳转带至下个页面

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	
<div class="tableWrap">
	<table>
		<thead>
			<tr>
				<td class="checkBox">
					<label>
						<input class="totalCheck"
							type="checkbox">

					</label>
				</td>
				<td>成果名称</td>
				<td>所属单位</td>
				<td>归属产业</td>
				<td>成果分类</td>
				<td>成果所属项目</td>
				<td>成果收益</td>
				<td>时间</td>
				<td>详情</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="checkBox">
					<label>
						<input class="elCheck"
							type="checkbox"
							name="subCheck">

					</label>
				</td>
				<td class="proName">5546</td>
				<td>sa;djfolskfj</td>
				<td>spdjfl;ksf</td>
				<td>s;ldfk</td>
				<td>sosidjfo</td>
				<td>lskjflksdf</td>
				<td>sldjfl</td>
				<td>
					<a href="javascript:;">进入详情</a>
				</td>
			</tr>
			<tr>
				<td class="checkBox">
					<label>
						<input class="elCheck"
							type="checkbox"
							name="subCheck">

					</label>
				</td>
				<td class="proName">65+</td>
				<td>sa;djfolskfj</td>
				<td>spdjfl;ksf</td>
				<td>s;ldfk</td>
				<td>sosidjfo</td>
				<td>lskjflksdf</td>
				<td>sldjfl</td>
				<td>
					<a href="javascript:;">进入详情</a>
				</td>
			</tr>
			<tr>
				<td class="checkBox">
					<label>
						<input class="elCheck"
							type="checkbox"
							name="subCheck">

					</label>
				</td>
				<td class="proName">656546+</td>
				<td>sa;djfolskfj</td>
				<td>spdjfl;ksf</td>
				<td>s;ldfk</td>
				<td>sosidjfo</td>
				<td>lskjflksdf</td>
				<td>sldjfl</td>
				<td>
					<a href="javascript:;">进入详情</a>
				</td>
			</tr>
			<tr>
				<td class="checkBox">
					<label>
						<input class="elCheck"
							type="checkbox"
							name="subCheck">

					</label>
				</td>
				<td class="proName">65+</td>
				<td>sa;djfolskfj</td>
				<td>spdjfl;ksf</td>
				<td>s;ldfk</td>
				<td>sosidjfo</td>
				<td>lskjflksdf</td>
				<td>sldjfl</td>
				<td>
					<a href="javascript:;">进入详情</a>
				</td>
			</tr>
			<tr>
				<td class="checkBox">
					<label>
						<input class="elCheck"
							type="checkbox"
							name="subCheck">

					</label>
				</td>
				<td class="proName">656546+</td>
				<td>sa;djfolskfj</td>
				<td>spdjfl;ksf</td>
				<td>s;ldfk</td>
				<td>sosidjfo</td>
				<td>lskjflksdf</td>
				<td>sldjfl</td>
				<td>
					<a href="javascript:;">进入详情</a>
				</td>
			</tr>
		</tbody>
	</table>
	<div class="btnWrap clearfix">
		<button class="psszBtn">评审设置</button>
	</div>
</div>
</body>
</html>

$('.totalCheck').change(function(){
    $('.elCheck').prop('checked',$(this).prop('checked'));

})
checkFun();
function checkFun(){
    $('.elCheck').click(function(){
        if(!$(this).prop('checked')){
            $('.totalCheck').prop('checked',false);
            $(this).prop('checked',false);
        }else{
           $(this).prop('checked',true);
        }
    })
}

$('.psszBtn').click(function(){
    var proNameArr= [];
    for(var i = 0; i< $('input:checked').length;i++){
        proNameArr[i] = {
            'id':i,  //项目ID
            'proName':$('input:checked').eq(i).parents('td').siblings('.proName').text()
        };
    };
    console.log(proNameArr);
})

转载于:https://www.cnblogs.com/xiaomaotao/p/9803987.html

weixin_34015860

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 操作表单中 checkbox 全选单选

知识点： Note: 1：　　.prop() 和 .attr() 方法的区别　　　　.prop() 针对标签既有属性　　　　.attr() 针对自定义属性2: $('input:checked')即为选中元素。---------------------------------------------------场景——项目管理需求如下图：...
复制链接

扫一扫