checkbox 多选框：jquery之全选、全不选、反选-白红宇

checkbox 多选框：jquery之全选、全不选、反选

阅读量：7093 次

发布时间：2019-06-28

本文共 1169 字，大约阅读时间需要 3 分钟。

[html]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>全选，不全选，反选</title>

<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(function () {

$("#selectAll").click(function () {//全选

$("#playList :checkbox").attr("checked", true);

});

$("#unSelect").click(function () {//全不选

$("#playList :checkbox").attr("checked", false);

});

$("#reverse").click(function () {//反选

$("#playList :checkbox").each(function () {

$(this).attr("checked", !$(this).attr("checked"));

});

});

});

</script>

</head>

<body>

<div id="playList">

<input type="checkbox" value="歌曲1" />歌曲1<br />

<input type="checkbox" value="歌曲2" />歌曲2<br />

<input type="checkbox" value="歌曲3" />歌曲3<br />

<input type="checkbox" value="歌曲4" />歌曲4<br />

<input type="checkbox" value="歌曲5" />歌曲5<br />

<input type="checkbox" value="歌曲6" />歌曲6

</div>

<input type="button" value="全选" id="selectAll" />

<input type="button" value="全不选" id="unSelect" />

<input type="button" value="反选" id="reverse" />

</body>

</html>

转载地址：http://skiql.baihongyu.com/

你可能感兴趣的文章

Exchange Server 2010的俩种版本比较

查看>>

asp.net 插入视频

查看>>

11、网络--Linux Bridge（网桥基础）

查看>>

参观迅达云成观后感

查看>>

linux(ubuntu)查看硬件设备命令

《深入PHP：面向对象、模式与实践》（一）

编译原理first集和follow集的求法

查看>>