`

复选框 全选 反选 选中奇数项 取消全选。。。

阅读更多

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <TITLE>NewDocument</TITLE>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <link href="css/ingrid.css" rel="stylesheet" type="text/css">
  <script language="JavaScript" src="js/jquery-1.4.2.min.js" type="text/javascript"></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(){
  varstr="";
  $("[name='checkbox'][checked]").each(function(){
  str+=$(this).val()+"\r\n";
  })
  alert(str);
  })
  })

  function selectall()
  {
      debugger;
   $("document").ready(function(){
    
      $("[name='checkbox']").attr("checked",'true');//全选
 
   });
  }
  //-->
  </SCRIPT>
 
 </HEAD>

 <BODY>
  <form name="form1" method="post" action="">
      <a id="all" href="javascript:selectall();">全选</a>
   <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">1<br>
   <input type="checkbox" name="checkbox" value="checkbox2">2<br>
   <input type="checkbox" name="checkbox" value="checkbox3">3<br>
   <input type="checkbox" name="checkbox" value="checkbox4">4<br>
   <input type="checkbox" name="checkbox" value="checkbox5">5<br>
   <input type="checkbox" name="checkbox" value="checkbox6">6<br>
   <input type="checkbox" name="checkbox" value="checkbox7">7<br>
   <input type="checkbox" name="checkbox" value="checkbox8">8<br>
  </form>
 
 </BODY>
</HTML>

分享到:
评论

相关推荐

    基于jquery实现复选框全选,反选,全不选等功能

    反选功能则是将已有选中的复选框取消选中,将没有选中的复选框设置为选中状态;全不选功能则是将所有复选框都取消选中。 首先,要实现这些功能,我们需要在HTML页面中添加一组复选框和几个相关按钮(全选、全不选、...

    jQuery如何判断checkbox(复选框)是否被选中

    在提供的代码片段中,可以看到一系列按钮对应不同的功能,包括全选、取消全选、选择所有奇数项、反选以及获取所有选中的值。这些功能通过jQuery的选择器和属性操作实现: - **全选**:使用`$("[name='checkbox']")....

    【JavaScript源代码】jQuery实现全选反选操作案例.docx

    - 全选:按钮`#allBtn`触发全选操作,通过`$("input[type='checkbox']").prop('checked', true)`设置所有复选框为选中状态。 - 反选:按钮`#overBtn`实现反选,使用`$("input[type='checkbox']").prop('checked', ...

    jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    2. **jQuery实现复选框全选** 要实现全选功能,可以监听一个全选按钮的点击事件,然后遍历所有具有特定名称的复选框,并设置它们的`checked`属性为`true`。以下是一个例子: ```javascript $("#btn1").click...

    jquery实现全选、反选、获得所有选中的checkbox

    2、取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:odd").attr("check

    jquery处理checkbox(复选框)是否被选中实例代码

    本文将详细介绍如何使用jQuery来处理复选框是否被选中的情况,包括全选、取消全选、选中奇数位置的复选框、反选复选框以及获取所有选中复选框的值。 首先,需要了解jQuery中获取复选框状态的方法。在早期的jQuery...

    jquery 实现checkbox全选,反选,全不选等功能代码(奇数)

    jQuery作为一个功能强大的JavaScript库,提供了一种简便的方式来操作DOM元素,包括复选框的全选、反选、全不选等操作。接下来,我们将深入探讨如何使用jQuery实现复选框的这些功能。 首先,全选功能是指当用户点击...

    jquery获取复选框被选中的值

    本文将详细介绍如何使用jQuery技术获取复选框被选中的值,并对其他相关操作(如全选、取消全选、选中奇数项、反选等)进行阐述。 首先,获取复选框被选中的值可以通过原生JavaScript来实现,也可以使用jQuery提供的...

    javascript实现可全选、反选及删除表格的方法

    在全选复选框的onchange事件中,会改变所有子复选框的选中状态,从而实现全选或取消全选所有行的效果。反选的功能可以通过对每个复选框进行取反操作来实现。 删除操作需要给“删除”按钮绑定事件处理函数。在函数...

    用Jquery获取checkbox多个选项详解

    在这个例子中,我们创建了几个按钮和复选框,按钮分别对应不同的功能:全选、取消全选、选中所有奇数位置的复选框、反选和获取选中的复选框值。这些功能是通过jQuery的事件监听器和选择器实现的。 1. 全选所有复选...

    jquery如何获取复选框的值

    然而,文章还提到了其他几个对复选框的操作,包括全选、取消全选、选中所有奇数、反选以及获得选中的所有值。接下来,我们来逐一了解这些操作: 全选操作: ```javascript $("#btn1").click(function(){ $("[name...

    jquery获取checkbox选中的值

    在本场景中,我们关注的是如何使用jQuery来处理HTML中的复选框(checkbox)元素,尤其是获取选中的值、实现全选、取消全选、反选以及选择奇数行的操作。下面将详细介绍这些知识点。 1. **获取选中的值** jQuery ...

    jquery全选checkBox功能实现代码(取消全选功能)

    反选和选中奇数位置复选框的实现稍微复杂一些,需要对复选框进行遍历操作,分别对它们的checked属性进行判断和修改。而获得选中的所有值功能,则需要将所有选中复选框的值拼接起来,并通过`alert()`函数显示。 在...

    jquery判断checkbox(复选框)是否被选中的代码

    9. **反选**:遍历所有复选框,如果当前项已选中,取消选中;反之,如果未选中,则选中。这可以通过 `each()` 遍历并使用 `if` 语句实现。 10. **获取选中项的值**:使用 `var str="";` 初始化一个空字符串,然后...

    CSS实现表格样式及全选功能

    2. 监听复选框状态:使用JavaScript的`addEventListener`绑定`click`事件,获取所有表单内的复选框并根据`select-all`的状态来同步它们。 ```javascript document.getElementById('select-all').addEventListener('...

Global site tag (gtag.js) - Google Analytics