欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery常用方法——checkbox控件

程序员文章站 2022-07-15 15:14:51
...
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: --------------------------------
jquery常用方法——checkbox控件
            
    
    博客分类: 学习资料Jquery htmljquery 
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");
	}
}

  • jquery常用方法——checkbox控件
            
    
    博客分类: 学习资料Jquery htmljquery 
  • 大小: 1.6 KB
相关标签: html jquery