`

jquery判断checkbox（复选框）是否被选

jquery 
阅读更多
都知道 在html 如果一个复选框被选中 是 checked="checked"。
但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked
所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的，其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。
   <input type="button" id="btn1" value="全选">
   <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获得选中的所有值">

代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
   $("document").ready(function(){
    $("#btn1").click(function(){
    $("[name='checkbox']").attr("checked",'true');//全选
    })
       $("#btn2").click(function(){
    $("[name='checkbox']").removeAttr("checked");//取消全选
    })
    $("#btn3").click(function(){
    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
    })
    $("#btn4").click(function(){
    
    $("[name='checkbox']").each(function(){
     if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }
   else
   {
    $(this).attr("checked",'true');
   }
    })
    })
     $("#btn5").click(function(){
    var str="";
    $("[name='checkbox'][checked]").each(function(){
     str+=$(this).val()+""r"n";
   //alert($(this).val());
    })
   alert(str);
    })
   })
  //-->
  </SCRIPT>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
   <input type="button" id="btn1" value="全选">
   <input type="button" id="btn2" value="取消全选">
   <input type="button" id="btn3" value="选中所有奇数">
   <input type="button" id="btn4" value="反选">
   <input type="button" id="btn5" value="获得选中的所有值">
   <br>
   <input type="checkbox" name="checkbox" value="checkbox1">
   checkbox1
   <input type="checkbox" name="checkbox" value="checkbox2">
   checkbox2
   <input type="checkbox" name="checkbox" value="checkbox3">
   checkbox3
   <input type="checkbox" name="checkbox" value="checkbox4">
   checkbox4
   <input type="checkbox" name="checkbox" value="checkbox5">
   checkbox5
   <input type="checkbox" name="checkbox" value="checkbox6">
   checkbox6
   <input type="checkbox" name="checkbox" value="checkbox7">
   checkbox7
   <input type="checkbox" name="checkbox" value="checkbox8">
checkbox8
</form>

以下是关于修改，判断只能修改一条记录(是iframe嵌套页面)
  function selectcheckbox(){
        var t=0;
        var boxnum = document.frames["dzdaiframe"].document.getElementsByName('listForm.ids');
      for (var i=0;i<boxnum.length;i++){
    if(boxnum[i].checked){
    id = boxnum[i].value;
      t++;
    }
    }
if(t==0) {
  alert("请至少选择一条记录");
  return false;
}
else if(t>1){
      alert("对不起，一次只能操作1条记录.");
      return false;
    }else{
    return true;
    }
    }
       $("#tldp").click(function(){
           $("#dzdahdgi").hide();
           $("#dzdaall").show();
           $("#dzdaiframe").attr("src","${Context}/background/tldp!search?Entity.root.class=com.egf.qingbao.jzyp.entities.YpTldp&Entity.root.alias=o&o.zjhm.value=${zd.zdgzrysfzh}&Entity.forward=list&Entity.listStyle=tldp");
           $("#adddzda").click(function(){
           window.location.href="${Context}/background/tldp!addtldp?sfzh=${zd.zdgzrysfzh}&xm=${zd.zdgzryxm}";
           });
           $("#uppdzda").click(function(){
            if(selectcheckbox())/********/
           window.location.href="${Context}/background/tldp!upptldp?id="+id;
          });
       });


二，同上
<html> <head>
        <title>
            复选框全选、全不选、反选、必选一个
        </title>
        <meta http-equiv="content-type" content="text/html;charset=GBK"/>
        <script language="javascript">
            //表单验证
            function check(){              
                var ids = document.getElementsByName("ids");              
                var flag = false ;              
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked){
                        flag = true ;
                        break ;
                    }
                }
                if(!flag){
                    alert("请最少选择一项！");
                    return false ;
                }
            }
            //全选
            function iselect(){ //其中函数字不能为select 其为JS保留字
                var ids = document.getElementsByName("ids");
                var all = document.getElementByIdx_x_x("all");              
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=all.checked;
                }
            }
            //全选
            function selectAll(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=true;
                }
            }
            //全不
            function selectNone(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    ids[i].checked=false;
                }
            }
            //反选
            function selectInvert(){
                var ids = document.getElementsByName("ids");                          
                for(var i=0;i<ids.length;i++){
                    if(ids[i].checked)
                        ids[i].checked=false ;
                    else
                        ids[i].checked=true ;
                }
            }
        </script>
    </head>
    <body>
        <form action="#" onsubmit="return check();">
        <table border="0">
            <tr><td><input type="checkbox" id="all" onclick="iselect();"></td></tr>
            <tr><td><input type="checkbox" name="ids">音乐</td></tr>
            <tr><td><input type="checkbox" name="ids">短信</td></tr>
            <tr><td><input type="checkbox" name="ids">图片</td></tr>
            <tr><td><input type="checkbox" name="ids">电子书</td></tr>
            <tr><td><input type="checkbox" name="ids">铃声</td></tr>
            <tr><td><input type="checkbox" name="ids">漫画</td></tr>
            <tr><td><input type="checkbox" name="ids">游戏</td></tr>
            <tr><td><input type="checkbox" name="ids">杂志</td></tr>
            <tr><td><input type="checkbox" name="ids">新闻</td></tr>
            <tr>
                <td>
                    <a href="#" onclick="selectAll();">全选</a>&nbsp;
                    <a href="#" onclick="selectNone();">全不</a>&nbsp;
                    <a href="#" onclick="selectInvert();">反选</a>
                </td>
            </tr>
            <tr><td><input type="submit" value="提交"></td></tr>
        </table>
        </form>
    </body>
</html>



   function checkSubmit() {
var taskcontext = document.getElementById('taskcontext');
var chkids = document.getElementsByName("chkid");
var flag = false;  
if(taskcontext.value==""){
   alert("关注原因不能为空！");
   return false;
}
for(var i=0;i<chkids.length;i++){
   if(chkids[i].checked){
      flag = true;
      break;
   }
}
if(!flag){
  alert("请至少选择一个单位！");
  return false;
}
}


checkbox技巧
1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});
分享到：
| dwr的使用
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    jQuery如何判断checkbox（复选框）是否被选中

    ### jQuery判断复选框是否被选中 在jQuery中，我们可以使用`.is(':checked')`方法来检查复选框是否被选中，或者通过`.prop('checked')`方法来获取或设置复选框的选中状态。这两种方法都是推荐的实践，因为它们提供...

    jquery 实现鼠标单击行时，选中checkbox复选框

    jquery 实现鼠标单击行时，改变行的背景颜色，选中checkbox复选框

    jQuery树形复选框插件.zip

    《jQuery树形复选框插件的深度解析与应用》 在Web开发中，为了提供用户友好的交互体验，我们经常需要实现各种各样的UI组件。其中，树形结构的复选框是一种常见且实用的功能，它允许用户以层级方式选择或取消选择一...

    基于jQuery的CheckBox复选框代码，效果很酷哦

    本教程将详细讲解如何利用jQuery实现一个炫酷的CheckBox复选框效果。 首先，让我们理解复选框（CheckBox）的基本概念。在HTML中，`&lt;input type="checkbox"&gt;`用于创建一个复选框，用户可以勾选或取消勾选。然而，...

    Prototype与jQuery美化Checkbox复选框实例.zip

    "Prototype与jQuery美化Checkbox复选框实例"这个压缩包文件正是针对这一需求提供的一种解决方案。下面，我们将详细探讨Prototype和jQuery库在美化Checkbox上的应用以及相关的前端知识点。 首先，Prototype是一个...

    jquery判断复选框是否被全部选中，达到全选的目的

    标题提到的“jquery判断复选框是否被全部选中，达到全选的目的”，就是针对这一需求的具体实现。下面我们将详细探讨如何利用jQuery来完成这个功能。 首先，我们需要理解jQuery库的基本用法。jQuery是一个广泛使用的...

    jQuery基于layui插件制作checkbox复选框选中代码

    在本文中，我们将深入探讨如何使用jQuery和layui插件来创建功能丰富的checkbox复选框，包括权限范围的多选、单选以及全选操作。同时，我们也将关注于父级和子级复选框之间的联动关系，即父级选中时子级全部选中，而...

    jquery 复选框组件

    **jQuery 复选框组件详解** 在Web开发中，复选框（Checkbox）是一种常见的用户交互元素，用于让用户从多个选项中选择一个或多个。jQuery，作为一款强大的JavaScript库，提供了丰富的插件和方法来增强复选框的功能和...

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中，经常会使用到LayUI框架搭建网页应用，尤其是在设计复杂的数据展示界面时，LayUI提供了强大的数据表格功能。然而，在某些场景...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中，复选框（checkbox）是常见的交互元素，用于让用户选择一个或多个选项。然而，原始的HTML复选框样式通常较为简单，缺乏吸引力。为了提升用户体验和界面美观度，...

    jQuery美化版复选框checkbox，自定义形状和颜色

    对于jQuery自定义复选框checkbox和单选框Radiobox，我们已经有介绍过不少了，比如9款迷人样式的CSS3自定义Checkbox复选框和HTML5/CSS3开关按钮 立体3D按钮。今天要介绍的是一款基于jQuery的美化版复选框，它的特点是...

    jQuery自定义美化复选框checkbox样式

    本项目专注于使用jQuery来美化复选框（checkbox）的样式，为用户提供更加美观和定制化的界面体验。 首先，复选框是HTML中一种基本的表单元素，通常用于让用户在多个选项中进行多选。然而，浏览器默认的复选框样式...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`&lt;input&gt;`标签定义，类型为...

    CheckBox复选框美化版

    "CheckBox复选框美化版"就是这样一个专注于提升UI美感的项目。复选框（CheckBox）是用户界面中常见的一种元素，用于让用户在多个选项中进行多选操作。在标准的HTML和CSS中，复选框的样式有限，往往难以满足设计师们...

    实现table表格checkbox复选框的全选 反选

    2. 当行内复选框被点击时，我们检查当前所有行内复选框是否都已被选中。如果都选中，全选复选框也被设置为选中状态；否则，全选复选框被取消选中。 这个简单的实现已经可以满足基本需求，但在实际项目中，可能还...

    jquery特效制作复选框,全选,反选,取消,购物车，统计价格，统计

    在这个项目中，我们关注的是使用jQuery来实现一些特定的功能，这些功能包括复选框的操作（全选、反选、取消选择）以及购物车中的商品价格统计。 首先，让我们深入了解一下复选框的操作。在HTML中，复选框是通过`...

    jquery实现 复选框 选中和不选中 美化复选框

    在网页设计中，复选框（Checkbox）是用户界面中常用的一种元素，它允许用户对多个选项进行选择或取消选择。然而，原生的HTML复选框在样式上可能较为简单，无法满足现代网页设计美观的需求。jQuery作为一个强大的...

    jQuery多级复选框checkbox选中代码

    本教程主要探讨的是如何使用jQuery实现多级复选框（checkbox）的功能，包括水平横向、垂直纵向两种排列方式，并且提供了三种不同的样式供选择。通过这个项目，我们可以学习到如何用jQuery控制复选框的状态，以及如何...

    jquery点击checkbox复选框仿招聘人才网弹出工作地点

    本示例探讨的是如何使用jQuery实现一个功能，即当用户点击复选框（checkbox）时，模仿招聘人才网站的工作地点弹出选择功能。这个功能可以提升用户体验，让用户更加便捷地筛选感兴趣的工作岗位。 首先，我们需要理解...

Magicbox
Global site tag (gtag.js) - Google Analytics