Jquery checkbox全选,反选,全不选实例

<!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 type="text/javascript" src="</script'>http://www.bannei.com/site_media/js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        $(function() {
            //全选
            $("#checkAll").click(function() {
                $("[name='items']:checkbox").attr("checked", true);

            });
            //反选
            $("#checkOpp").click(function() {
                $("[name='items']:checkbox").each(function() {

                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
            //全不选
            $("#checkNO").click(function() { $("[name='items']:checkbox").attr("checked", false); });

            $("#SubmitID").click(function() {
                var Str = "你选中的是:\n\r";
                $("[name='items']:checkbox:checked").each(function() {
                    Str += $(this).val() + "\n\r";
                });
                alert(Str);
            });

        });
    </script>

</head>
<body>
    <form>
    <fieldset>
        <legend>你爱好的运动是?</legend>
        <div id="DIV1">
            <input type="checkbox" name="items" value="足球" />足球
            <input type="checkbox" name="items" value="篮球" />篮球
            <input type="checkbox" name="items" value="乒乓球" />兵乓球
            <input type="checkbox" name="items" value="跑步" />跑步
            <input type="checkbox" name="items" value="踢毽子" />踢毽子
            <input type="checkbox" name="items" value="俯卧撑" />俯卧撑
            <input type="checkbox" name="items" value="羽毛球" />羽毛球
        </div>
        <br>
        <input type="button" value="全选" id="checkAll" />
        <input type="button" value="反选" id="checkOpp" />
        <input type="button" value="全不选" id="checkNO" />
        <input type="button" value="取值" id="SubmitID" />
    </fieldset>
    </form>
</body>
</html>

  

时间: 2024-09-25 02:51:54

Jquery checkbox全选,反选,全不选实例的相关文章

javascript 全选反选: 全选/反选/局部选择

全选: selectAll(obj) {  for (var i = 0; i < obj.elements.length; i++) {  if (obj.elements[i].type == "checkbox") {  obj.elements[i].checked = true;  }  }  }  多选框反选 selectOther(obj) {  for (var i = 0; i < obj.elements.length; i++) {  if (obj.

jQuery对checkbox 复选框的全选全不选反选的操作_jquery

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证_jquery

jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

JQuery实现列表中复选框全选反选功能封装(推荐)_jquery

我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(

js 多表单checkbox全选、反选、不全选效果

全选 全不选 反选 全选 全不选 反选 全选 全不选 反选

js html css实现复选框全选与反选_javascript技巧

本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 <html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content=&quo

JS实现CheckBox复选框全选、不选或全不选功能_javascript技巧

CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享_javascript技巧

效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

JS实现CheckBox复选框全选全不选功能_javascript技巧

 CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合.     Ch

jquery checkbox的相关操作总结_jquery

jquery checkbox的相关操作--全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&