jquery-全选,反选,全不选

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选,反选,全不选</title>
<head></head>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
    $(function(){
        $("#CheckedAll").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"));
            })
        });
        $("#send").click(function(){
            var str = "你选中的爱好:\r\n";
            $(‘input[type=checkbox][name=items]:checked‘).each(function(){
                str+=$(this).val()+‘\r\n‘;
            });
            alert(str);
        });
    });
</script>
<body>

<form>
   你爱好的运动是?<br/><input type="button" id="CheckedAll" value="全选"/><br/>
                   <input type="button" id="unSelect" value="全不选"/><br/>
                   <input type="button" id="reverse" value="反选"/><br/>
   <div id="playList">
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
        <input type="button" id="send" value="提 交"/>
   </div>
</form>

</body>
</html>

jquery-全选,反选,全不选

时间: 2024-08-09 21:42:53

jquery-全选,反选,全不选的相关文章

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

checkbook全选/反选/全不选

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="list"> <li><label><input type="checkbox"

表单全选反选全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>请输入关键词</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head><bod

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

复选框的 全选 反选 全不选

//全选 $("#btn1").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",true); }); //取消全选 $("#btn2").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",false); }); //反选 $(&

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

jquery实现全选/反选功能

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多选框全选/反选</title> <script src="http://res01.xesimg.com/jquery/jquery.min.js">&l

jquery的全选,全不选,反选

jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryselect.aspx.cs" Inherits="WebApplication9.jqueryselect" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh