V2版本: 改进操作界面,统一表单样式,更多工具支持批量生成,欢迎使用 到达~


文库 阅读
作者: xiaoyu 02/24 20:05:39

JQuery实现form表单全选 全不选 反选 获取选中的值

JQuery实现form表单全选全不选反选获取选中的值

<table>
	<tr>
		<td>
			<input type="checkbox" name="all" />
			<input type="button" name="checkAll" id="checkAll" value="全选" />
			<input type="button" name="checkNo" id="checkNo" value="全不选" />
			<input type="button" name="checkRev" id="checkRev" value="反选" />
			<input type="button" name="getCheck" id="getCheck" value="获取选中的值" />
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" name="check" value="奇异果"/>奇异果
			<input type="checkbox" name="check" value="车厘子"/>车厘子
			<input type="checkbox" name="check" value="苹果"/>苹果
			<input type="checkbox" name="check" value="蜜瓜"/>蜜瓜
			<input type="checkbox" name="check" value="芒果"/>芒果
			<input type="checkbox" name="check" value="杨梅"/>杨梅
		</td>
	</tr>
</table>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$("input[name='all']").click(function () {
		$("input[name='check']").prop("checked", this.checked);
	});

	$("#checkAll").click(function () {
		$("input:checkbox").prop("checked", true);
	});

	$("#checkNo").click(function () {
		$("input:checkbox").prop("checked", false);
	});

	$("#checkRev").click(function () {
		$("input[name='check']").each(function () {
			this.checked = !this.checked;
		});
	});

	$("#getCheck").click(function () {
		var checkVal = [];
		$("input[name='check']:checked").each(function (i) {
			checkVal[i] =$(this).val();
		});
		alert(checkVal)
	});
</script>
奇异果 车厘子 苹果 蜜瓜 芒果 杨梅
首页 喜欢 我的 定制
定制咨询
微信二维码
扫一扫上面的二维码,加我为朋友。
微信扫码周一至周六服务
接定制开发需求