<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>演示：jQuery实现的全选、反选和不选功能</title> <!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>--> <style> .demo { width: 520px; margin: 40px auto 0 auto; min-height: 250px; }
ul li { line-height: 30px; font-size: 14px }
.btn { overflow: hidden; display: inline-block; *display: inline; padding: 4px 20px 4px; font-size: 14px; line-height: 18px; *line-height: 20px; color: #fff; text-align: center; vertical-align: middle; cursor: pointer; background-color: #5bb75b; border: 1px solid #cccccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-left: 2px } </style>
</head>
<body>
<div id="main"> <div class="demo"> <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li> <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li> </ul> <input type="checkbox" id="all">
<input type="button" value="获得选中的所有值" class="btn" id="getValue"> </div></div>
<script src="./lib/jquery/jquery-1.12.2.min.js"></script><script> $(function () { //全选或全不选 $("#all").click(function () { if (this.checked) { $("#list :checkbox").prop("checked", true); } else { $("#list :checkbox").prop("checked", false); } });
function cheaked() { //1. 获取input总个数 var cheaknum = $(‘#list input‘).size(); //2. 创建一个点击个数 var xznum = ‘‘;
$(‘#list input‘).each(function () { //3. 循环inpit 判断是否选中 选中就 ++ if ($(this).prop(‘checked‘) == true) {
xznum++ } });
//4. 如果点击选中个数与总数相同则 $(‘#all‘) 状态 选中 if (cheaknum == xznum) { $(‘#all‘).prop(‘checked‘,true); }else{ $(‘#all‘).prop(‘checked‘,false); }; };
$("#list input").click(function () { cheaked() }); // 获取选中input的数据 function data(){ $(‘#list input‘).each(function () { if ($(this).prop(‘checked‘)){ alert($(this).parent().text()); }else{return} }); };
$(‘.demo :button‘).click(function () { data(); }); });
</script>
</body></html>
原文地址：https://www.cnblogs.com/shenbo666/p/9648033.html
时间： 2024-10-03 14:56:28