jquery 操作checkbox的例子(全选,反选,获取选取值...)

最新推荐文章于 2024-01-23 19:19:19 发布
最新推荐文章于 2024-01-23 19:19:19 发布
阅读量1.8k 收藏
点赞数
文章标签： jquery input function button stylesheet javascript
1、 
 <!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" />
  <link href="css/ingrid.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="jquery-1.2.3.pack.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(){
       var str="";
          $("[name='checkbox'][checked]").each(function(){
              str+=$(this).val()+"\r\n";
          })
         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>

 </BODY>
</HTML>
2、 
<!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" />
    <link href="css/ingrid.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script language="JavaScript">  
  <!--
        $("document").ready(function () {

            $("#btn1").click(function () {

                $("#dv").find("[name='checkbox']").attr("checked", 'true');//全选

            })
            $("#btn2").click(function () {

                $("#dv").find("[name='checkbox']").removeAttr("checked");//取消全选

            })
            $("#btn3").click(function () {

                $("#dv").find("[name='checkbox']:even").attr("checked", 'true');//选中所有奇数

            })
            $("#btn4").click(function () {

                $("#dv").find("[name='checkbox']").each(function () {


                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");

                    }
                    else {
                        $(this).attr("checked", 'true');

                    }

                })

            })
            $("#btn5").click(function () {
                var str = "";
                $("#dv").find("[name='checkbox'][checked]").each(function () {
                    str += $(this).val() + "\r\n";
                })
                alert(str);
            })
        })
  //-->  
    </script>
</head>
<body>
    <form name="form1" method="post" action="">
    <input type="checkbox" name="checkbox" value="checkbox0">
    checkbox0
    <div id="dv">
        <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
    </div>
    </form>
</body>
</html>



CodingSir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 获取checkbox 选中的值
Kit_G的博客
09-11 707
首先是html部分<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="../js/jquery-1.3.2.js"></script> <script type="text/javascript" src="../js/common.js"></script> </head> <body>
jQuery 获取所有checkbox选中的值 、 全选checkbox等
NuClear的.Net专栏
10-10 3108
//获取checkbox选中的值  返回 （值，值，值） 的字符串         function getCheckedboxValue() {             var ckbValue = "";             $("input[name=ckb]:checked").each(function () {                 ckbValue = ckbV
Jquery操作复选框(CheckBox)的取值赋值实现代码
极客神殿
08-01 2856
1. 获取单个checkbox选中项(三种写法)： $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项： $('input:checkbox').ea...
jQuery 复选框 checkbox 取值和赋值
joe0235的博客
07-13 2418
获取单个checkbox选中项(三种写法)： $("input:checkbox:checked").val() // 或者 $("input:[type='checkbox']:checked").val(); // 或者 $("input:[name='ck']:checked").val(); 获取多个checkbox选中项： $('input:checkbox').each(function() { if ($(this).attr('checked') ==true).
用Jquery实现checkbox的反选、全选、全不选
热门推荐
阴慧超的博客
09-18 4万+
当我们在用JS来实现web端操作的时候，多选框的全选、全不选和反选是最常用的功能，尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。        下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能：         假设有4个checkbox多选框，他们包含在一个id=“chk”的div中，而全选、全不选、反选的button按钮所在标签的i
JQuery实现复选框CheckBox的全选、反选、提交操作
pan_junbiao的博客
07-29 2375
对复选框最基本的应用，就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩，来达到各种级联反应效果。 【示例】使用Jquery实现复选框CheckBox的全选、反选、提交操作。 （1）创建页面，创建一个表格在表格的第一列中放入一组复选框，并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
jQuery实现的表格行全选反选单选特效源码.zip
11-18
这个"jQuery实现的表格行全选反选单选特效源码.zip"文件，显然提供了一种实现表格中行的全选、反选和单选效果的示例代码。下面我们将深入探讨jQuery在实现这种功能时涉及的关键知识点。 首先，jQuery的选择器是其...
jquery、js操作checkbox全选反选
10-26
以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中，你可以根据需要调整这些函数，例如添加事件监听器，使得全选/反选按钮可以触发这些功能。在网页开发中，这样的功能能够显著...
Jquery CheckBox全选方法代码附js checkbox全选反选代码
11-30
在jQuery库的帮助下，这个任务变得非常简单和直观，正如标题“Jquery CheckBox全选方法代码附js checkbox全选反选代码”所示。这里我们将详细讲解如何使用jQuery实现全选和反选的功能，并对比JavaScript的实现方式。...
select checkbox radio项直接赋值jQuery插件
07-18
jQuery插件只可以用val方法给input标签的text、password、hidden类型赋值。 而checkbox、radio属性和select标签就无法直接赋值，必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件，可以直接用setval方法像赋值一样设定选中项。
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者。 //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecked ? fruit.attr('checked', true) : f
jquery复选框CHECKBOX全选、反选
10-30
在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是常见的需求，尤其是在数据筛选或批量操作的场景下。这里介绍一个官方提供的函数`CheckboxGroup`，它简化了这一过程。该函数在2018年6月18日的最新版本中发布，...
Jquery 复选框取值赋值
zhaoyang10的专栏
12-25 1257
1. 获取单个checkbox选中项(三种写法)： $(&quot;input:checkbox:checked&quot;).val() $(&quot;input:[type='checkbox']:checked&quot;).val(); $(&quot;input:[name='ck']:checked&quot;).val(); 2. 获取多个checkbox选中项： $('input:checkbox').each(functio..
jQuery数据结构渲染（4）：复选框checkbox赋值
祈澈菇凉
05-11 926
1：当返回值是字符串的时候 data.json: { "circle": "2;3;4;5;6;1" } 示例代码： <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</ti...
jQuery操作复选框checkbox方法
qq_26993175的博客
02-23 1062
jQuery赋值checked的几种写法： 所有的jQuery版本都可以这样赋值，不建议用attr()；出处：https://www.cnblogs.com/gzb1/p/16289116.html。获取单个checkbox选中项的值(三种写法)jQuery操作复选框checkbox方法。设置第一个checkbox 为选中值。设置最后一个checkbox为选中值。获取多个checkbox选中项。
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 778
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jquery之checkbox全选反选提交参数
php-yyds
11-06 630
标签来触发相应的操作方法。当点击不同的按钮时，相应的JavaScript代码会执行，实现了checkbox的全选、全不选、反选和提交功能。你可以根据自己的需求来处理选中的值，例如将其发送给服务器或进行其他操作。标签中编写了全选、全不选、反选和提交的操作方法。标签中，我们创建了一些checkbox选项，并使用。选择所有被选中的checkbox，并将其值存入。标签中引入了jQuery库，并在。在提交按钮的点击事件中，我们通过。在上述示例中，我们在。
jQuery实现全选和反选功能
最新发布
qq_50587303的博客
01-23 966
使用jquery实现全选和全不选,反选
jquery 全选反选 并且获取所有值
09-14
使用jQuery实现全选和反选功能，并获取所有选中的值有以下几个步骤： 1. 添加全选和反选的HTML代码： ```html <input type="checkbox" id="selectAll">全选 <input type="checkbox" name="checkbox" value="1">选项1 <input type="checkbox" name="checkbox" value="2">选项2 <input type="checkbox" name="checkbox" value="3">选项3 ``` 2. 使用jQuery编写全选和反选功能的事件处理程序： ```javascript // 全选和反选功能 $("#selectAll").change(function() { $("input[name='checkbox']").prop("checked", $(this).prop("checked")); }); // 获取所有选中的值 function getSelectedValues() { var values = []; $("input[name='checkbox']:checked").each(function() { values.push($(this).val()); }); return values; } ``` 3. 在需要的时候调用`getSelectedValues()`函数来获取所有选中的值： ```javascript var selectedValues = getSelectedValues(); console.log(selectedValues); // 输出所有选中的值 ``` 这样就可以实现jquery全选和反选，并获取所有选中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值