`

jquery常用方法——checkbox控件

阅读更多
1、判断checkbox(复选框)是否被选中
//html
<input type="checkbox" id="acceptId">我已阅读并接受

//js
var accept = $("#acceptId").is(":checked");
if (accept) {
    // 哈哈该复选框被选中了
}


jquery判断checkbox是否选中及改变checkbox状态
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦(推荐)


jquery获取checkbox选中个数
$("input[name='ckb-jobid']:checked").length
$("input[type='checkbox']:checked").length;


jQuery赋值checked推荐的几种写法
$("#cb1").prop("checked",true); //标准写法,推荐!
$("#cb1").prop({checked:true}); //map键值对    
$("#cb1").prop("checked",function(){
    return true;//函数返回true或false
});

------------------------------ eg: --------------------------------

1、html文件:
<script src="/assets/js/jquery-2.0.3.min.js"></script>
<input type="checkbox" id="cheboxAllNews" onclick="doSelectAllNews();" />全选<br/>
-----------------------------------------<br/>
<input type="checkbox" name="newscheckbox" value="1" onclick="isSelectAllNews(this);" />语言<br/>
<input type="checkbox" name="newscheckbox" value="2" onclick="isSelectAllNews(this);" />文学<br/>
<input type="checkbox" name="newscheckbox" value="3" onclick="isSelectAllNews(this);" />天文<br/>


2、js文件
//选中全部复选框
function doSelectAllNews() {
	var dd = $("#cheboxAllNews");
	var df = $("#cheboxAllNews").is(":checked");  //推荐使用“:checked”
	if($("#cheboxAllNews").is(":checked")) {
		//$("input[name='newscheckbox']").attr("checked", "checked");  //不起作用了
		$("input[name='newscheckbox']").prop("checked",true); 
	} else {
		$("input[name='newscheckbox']").removeAttr("checked");
	}
}
function isSelectAllNews(news) {
	if($(news).attr("checked") != "checked") {
		$("#cheboxAllNews").removeAttr("checked");
	}
}

  • 大小: 1.6 KB
分享到:
评论

相关推荐

    jquery写个checkbox——类似邮箱全选功能

    - `.each()`方法用于遍历jQuery对象集合,对每个元素执行一个函数。 - 在复选框点击事件中,通过遍历检测每个复选框是否被选中,并据此来设置全选按钮的状态,以及在反选操作中改变每个复选框的选中状态。 6. ...

    JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结

    本文将深入探讨jQuery如何与ASP.NET中的三个常见服务器控件——DropdownList、RadioButtonList和CheckboxList交互,以便于在客户端进行数据获取和操作。 ### 一、DropdownList DropdownList是下拉列表控件,通常...

    多个jquery.datatable共存,checkbox全选异常的快速解决方法

    当多个 DataTables 控件在同一个页面上并存时,它们各自的全选复选框可能具有相同的 ID —— “chk_all”。由于 ID 在 HTML 中必须是唯一的,因此当用户尝试对其中一个表格进行全选操作时,JavaScript 事件处理程序...

    jquery-easyui-1.3.4.rar

    在标题“jquery-easyui-1.3.4.rar”中,我们看到的是jQuery EasyUI的一个特定版本——1.3.4。这个版本可能包含了该框架在2014年左右的状态,因为EasyUI的版本更新较为频繁,每个版本都可能引入新的功能、修复已知...

    纯JQuery实现三态选择TreeView示例

    本文将详细讲解如何使用纯jQuery实现一个具有三态选择功能的TreeView控件。 首先,理解“三态选择”是关键。在常规的二态选择中,用户通常只能在选中和未选中之间切换。而三态选择增加了第三个状态——半选,这在...

    Extjs,Jquery,Dhtmlxtree之上的树

    本篇文章主要探讨了三种流行的JavaScript库——Extjs、Jquery、Dhtmlxtree中实现树形结构(Tree)的方法及其差异。树形结构在用户界面设计中扮演着重要的角色,尤其是在展现具有层级关系的数据时。下面我们将分别...

    easyui-tree-diasbleCheckbox

    这个框架是基于jQuery的,提供了丰富的组件,包括表格、对话框、菜单、按钮、表单验证以及我们今天要讨论的主题——树形控件(tree)。 标题"easyui-tree-diasbleCheckbox"暗示了我们关注的是EasyUI树形控件中的一...

    3Z版基于jquery的图片复选框(asp.net+jquery)

    该知识点重点介绍了如何在***环境下,利用jQuery技术开发一个自定义的图片复选框功能,并通过改造现有的imageTick插件,以满足特定项目——彩票缩水工具的界面需求。 知识点详细说明如下: ### jQuery图片复选框...

    Dreamweaver CS5从新手到高手视频教程下载第11章 让网页动起来——用表单创建交互网页.zip

    表单由`&lt;form&gt;`标签定义,其中可以包含各种表单控件,如文本框`&lt;input type="text"&gt;`、密码框`&lt;input type="password"&gt;`、复选框`&lt;input type="checkbox"&gt;`、单选按钮`&lt;input type="radio"&gt;`、下拉列表`&lt;select&gt;`等...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树形控件。然而,在实际应用中,我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...

    html5手机端信息筛选条件代码.zip

    JS特效——菜单导航是本项目的关键标签,意味着代码会实现动态的菜单展开和收缩,以及导航的平滑滚动效果。这通常涉及到事件监听器(如`addEventListener`),DOM操作(如`getElementById`或`querySelectorAll`),...

    Assignment1:在这里有schoolTimeTable和biodataForm

    表单通常包含各种输入控件,如文本输入框()、密码输入框()、多选框(&lt;input type="checkbox"&gt;)、单选按钮()以及提交按钮()。每个输入控件都有其特定的属性,如name属性用于识别数据,required属性确保字段...

Global site tag (gtag.js) - Google Analytics