jQuery操作CheckBox的方法(选中,取消,取值)详解

最新推荐文章于 2023-11-06 08:00:00 发布
最新推荐文章于 2023-11-06 08:00:00 发布
阅读量463 收藏
点赞数 1
分类专栏： jQuery 
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
<html><head>   
  <title>jQuery操作CheckBox的方法(选中,取消,取值)详解</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．quot;).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>   
     
 
<style type="text/css" id="wiz_custom_css">
body
{
    font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif;
    font-size: 10.5pt;
    line-height: 1.5;
}
html, body
{
    
    
}
h1 {
    font-size:1.5em;
    font-weight:bold;
}
h2 {
    font-size:1.4em;
    font-weight:bold;
}
h3 {
    font-size:1.3em;
    font-weight:bold;
}
h4 {
    font-size:1.2em;
    font-weight:bold;
}
h5 {
    font-size:1.1em;
    font-weight:bold;
}
h6 {
    font-size:1.0em;
    font-weight:bold;
}
img {
    border:0;
    max-width: 100%;
}
blockquote {
    margin-top:0px;
    margin-bottom:0px;
}
table {
    border-collapse:collapse;
    border:1px solid #bbbbbb;
}
td {
    border-collapse:collapse;
    border:1px solid #bbbbbb;
}
</style>
<script type="text/javascript" src="file:///E:\WizNote\WizTools\htmleditor\todo.js" id="wiz_todo_script_id" wiz_style="unsave" charset="utf-8"></script><script type="text/javascript" src="file://E:\WizNote\WizTools\htmleditor\dragresize.js" id="wiz_img_resize_script_id" wiz_style="unsave" charset="utf-8"></script><style type="text/css" id="wiz_img_resize_style_id" wiz_style="unsave">.wizimgdragresize {position: absolute;z-index: 1000;border: 1px solid black; background-color: white;} .wizimgdragresize-lt { cursor: nw-resize; } .wizimgdragresize-tm { cursor: n-resize;}.wizimgdragresize-rt {cursor: ne-resize;}.wizimgdragresize-lm {cursor: w-resize;}.wizimgdragresize-rm {cursor: e-resize;}.wizimgdragresize-lb {cursor: sw-resize;}.wizimgdragresize-bm {cursor: s-resize;}.wizimgdragresize-rb { cursor: se-resize; }</style><style type="text/css" id="wiz_todo_style_id" wiz_link_version="01.00.08">.wiz-todo, .wiz-todo-img {width: 16px; height: 16px; cursor: default; padding: 0 10px 0 2px; vertical-align: -10%;-webkit-user-select: none;} .wiz-todo-label { display: inline-block; padding-top: 8px; padding-bottom: 8px; line-height: 1;} .wiz-todo-label-checked { /*text-decoration: line-through;*/ color: #666;} .wiz-todo-label-unchecked {text-decoration: initial;} .wiz-todo-completed-info {padding-left: 44px; display: inline-block; } .wiz-todo-avatar { width:20px; height: 20px; vertical-align: -20%; margin-right:10px; border-radius: 2px;} .wiz-todo-account, .wiz-todo-dt { color: #666; }</style></head>   
  
 <body contenteditable="true" style="">   
 <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></span>
RandomMe
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1561
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
JQuery对checkbox操作 （循环获取）
LzwGlory的专栏
12-11 2838
无标题页 jQuery(function($){ //全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) //取消全选 $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr(
jQuery操作复选框checkbox技巧总结
Golden的专栏
10-28 9833
jQuery操作复选框checkbox技巧总结 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆ 定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 checked 属性适用于 <input type="checkbox"> 和 <inp..
jQuery对checkbox的各种操作
slongzhang的博客
07-21 7409
//注意： 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上（包含）建议用prop //1、根据id获取checkbox $("#cbCheckbox1"); //2、获取所有的checkbox $("input[type='checkbox']");//or $("input[name='cb']"); //3、获取所有选中的checkbox $("input:checkbox:
Jquery—JQuery对checkbox的操作(01)
gaohuanjie的专栏
04-01 5012
JQuery实现radio、select、checkbox禁用 $(document).ready(function(){ var input = $("#radioDiv").find("input:radio"); input.attr("disabled","disabled"); input.each(function()
jquery操作复选框checkbox
css使多个相互之间有间隔的元素两端对齐显示
12-20 351
jQuery判断checked的三种方法:.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop('checked'): //16+:true/fals .is(':checked'): //所
jquery checkbox 选中 取消 checkbox多选
10-27
本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 首先，我们需要理解HTML中的`<input>`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...
jQuery操作CheckBox的方法介绍(选中,取消,取值)
12-10
在本文中，我们将深入探讨如何使用jQuery来操作CheckBox控件，包括选中、取消选中以及获取选中项的值。jQuery是一个强大的JavaScript库，它提供了简洁的API来处理DOM操作，使得对CheckBox等HTML元素的操作变得简单易...
jQuery实现点击行选中或取消CheckBox的方法
10-21
4. **键盘操作**：支持使用键盘的空格键来选中或取消当前行的复选框。 5. **优化性能**：如果表格行数量很大，使用`.live()`可能会导致性能问题。考虑使用`.on()`来绑定事件，并将事件委托到更接近文档根部的静态父...
jQuery获取checkbox选中的值
10-22
jquery checkbox选择器在程序开发中经常会用到，接下来通过实例代码给大家介绍jquery获取checkbox选中的值，需要的朋友参考下
jquery 的checkbox样式
02-28
基于jQuery的Checkbox精美样式插件 .
jquery操作checkbox的几种方法
aboboo520的博客
12-15 583
jquery获取checkbox是否选中状态： $("#id").attr('checked):   $("#id").prop('checked'): $("#id").is(':checked'):    jquery为checkbox设置值： $("#id").attr("checked","checked"); $("#id").attr("checked",true)
jQuery 复选框 checkbox 取值和赋值
我的博客
06-06 1725
单个checkbox。多个checkbox。
jquery之checkbox全选反选提交参数
最新发布
php-yyds
11-06 630
标签来触发相应的操作方法。当点击不同的按钮时，相应的JavaScript代码会执行，实现了checkbox的全选、全不选、反选和提交功能。你可以根据自己的需求来处理选中的值，例如将其发送给服务器或进行其他操作。标签中编写了全选、全不选、反选和提交的操作方法。标签中，我们创建了一些checkbox选项，并使用。选择所有被选中的checkbox，并将其值存入。标签中引入了jQuery库，并在。在提交按钮的点击事件中，我们通过。在上述示例中，我们在。
使用 jQuery 为复选框设置“选中”
kalman2019的博客
12-11 1万+
我想做这样的事情来使用 jQuery 勾选 checkbox：或者这样的事情存在吗？
ps中的色彩范围
ducaijia_123的博客
10-21 712
ps中的色彩平衡在选择->色彩范围中，他的作用可以把相近的颜色进行选区的选中，你可以按住shift键来进行颜色的增加和减少。还有他的一个容差值来进行选区的选择。
【jQuery】jQuery多种获取checkbox值等操作
这不是我的博客
01-07 1741
1.获取选中的值 var arr=new Array(); $('input[name="id"]:checked').each(function(){ arr.push($(this).val());//向数组中添加元素 }); console.log(arr); // 数组结果 var idStr = arr....
用Jquery获取checkbox多个选项
技术资料收集站
11-28 341
louis-blog >> jQuery 对checkbox的操作         $("document").ready(function(){   $("#btn1").click(function(){   $("[name='checkbox']").attr("checked",'true');//全选   })   $("#btn2").click(function(){   $("[
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
热门推荐
有范管理美学 | 公众号/头条号：有范管理美学
08-21 12万+
jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> ...
jquery取消checkbox选中
03-16
可以使用以下代码来取消checkbox的选中状态： ``` $("#checkboxId").prop("checked", false); ``` 其中，`#checkboxId`是你要取消选中的checkbox的ID。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值