单个和多个checkbox选中事件怎么写
单个和多个checkbox选中事件怎么写
一、总结
一句话总结:
1、checkbox的事件方法的话主要是change和click
2、checkbox的属性判断的话主要是prop(判断checked和赋值checked)和attr(赋值checked)和is(判断checked),注意不同版本的不同用法
1、jquery中不同版本的方法使用是否一样?
解答:不一样,所以我们要注意版本。
2、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,这句话对么?
解答:对的,attr在1.6版本之后被改成做判断的了。
3、jquery中如何通过prop方法获取checked属性?
解答:用prop直接获取checked值,var aaa = $("#check").prop("checked");获取的checked返回值为boolean,选中为true,否则为flase
。
4、jquery中如何获取多个checkbox的值?
解答:选择器选中多个,然后获取每个元素的checked属性,var groupCheckbox=$("input[name='check']");
。 if(groupCheckbox[i].checked)
5、jquery中attr和prop给checkbox赋值checked属性的常用两种方法?
解答:键值对的形式,一种是赋值为true,一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。
6、jquery中checkbox主要的事件是哪两个?
解答:change和click。
7、jquery的方法一般套在什么函数里面?
解答:文档的ready函数里面。$(document).ready(function()。
8、jquery中如何选中属性name值为tisaccept的input元素?
解答:属性值加中括号,属性值里面是等号,属性的值用单引号,因为外面是双引号。$("input[name='tisaccept']")
9、jquery或者别的语言或者框架中,同一种方法获取值和设置值的通用方式?
解答:获取值只有键,设置值是先键后值,值一般是双引号,获取值:.prop("checked");设置值:.prop("checked","checked")。
二、单个和多个checkbox选中事件怎么写
1、单个checkbox的点击事件
如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,需要的朋友可以参考下
html:
<input type="checkbox" name="check" id="check" checked="checked" value="Daily" />
<input type="checkbox" name="check" checked="checked" value="Daily" />
获取checked属性:
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase
var aaa = $("#check").prop("checked");
if(aaa){
alert("选中");
};
2.直接调用checked属性,不过如果获取的结果是一个checkbox,则要加上.checked前加上.get(0)或者[0]才行,多个checkbox则不用。因为你用$选择出来的结果其实是个数组的形式,就算一个也是数组,你得用[]来取第几个的值。
var aaa = $("#check").get(0).checked;
if(aaa){
alert("选中");
};
3、获取多个checkbox的值
var groupCheckbox=$("input[name='check']");
for(i=0;i<groupCheckbox.length;i++){
if(groupCheckbox[i].checked){
var val =groupCheckbox[i].value;
alert(val );
}
}
设置选中radio:
$('#infType1').prop("checked","checked");
//或者
$("input[type=radio][name=infType][value=1]").prop("checked",'checked');
说明:
如果使用attr方法获取时:
1、如果当前input中初始化未定义checked属性,则不管当前是否中,$(“#check”).attr(“checked”)都会返回undefined;
2、如果当前input中初始化已定义checked属性,则不管是否选中,$(“#selectAll”).attr(“checked”)都会返回checked.
2、多个checkbox的点击事件
$(function(){
var s = $("input[name='check']");
s.each(function(i) {
// alert(i);
$(this).click(function(){
if(this.checked==true){
alert(this.value);
}
});
});
})
三、jquery checkbox选中、改变状态、change和click事件
jquery判断checked的三种方法:
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");
checkbox click和change事件
方法1:
$("#ischange").change(function() {
alert("checked");
});
方法2:
$(function(){
if ($.browser.msie) {
$('input:checkbox').click(function () {
this.blur();
this.focus();
});
};
方法3:
$("#ischange").change(function() {
alert("checked");
});
});
方法4:
$(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});
方法5:
$(document).ready(function(){
$("testCheckbox").change(function() {
alert("Option changed!");
});
});
四、自己实例
html:
<head>
{include file="common/headItems" /}
<script>
// 是否接受任务选项框事件
//alert("接受任务成功");
$(document).ready(function(){
//alert("接受任务成功");
//奇怪,这里用.tisaccept会错 因为class才是. #是id
$("input[name='tisaccept']").click(function(){
//alert("接受任务成功");
var isAccept = $("input[name='tisaccept']").prop("checked");
//alert(isAccept);
if(isAccept){
alert("接受任务成功");
//$("#tisaccept").prop("checked",false);
}else{
alert("取消任务成功");
//$("#tisaccept").prop("checked",true);
}
});
});
</script>
</head>
<div class="tpl-switch">
<input type="checkbox" name="tisaccept" class="ios-switch bigswitch tpl-switch-btn" {php}if($vo['tisaccept']) echo 'checked';{/php} />
<div class="tpl-switch-btn-view">
<div>
</div>
</div>
</div>
change方法应该也是可以的,选事件方法的时候就最先选click和change。
五、测试题-简答题
1、jquery中不同版本的方法使用是否一样?
解答:不一样,所以我们要注意版本。
2、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,这句话对么?
解答:对的,attr在1.6版本之后被改成做判断的了。
3、jquery中如何通过prop方法获取checked属性?
解答:用prop直接获取checked值,var aaa = $("#check").prop("checked");获取的checked返回值为boolean,选中为true,否则为flase
。
4、jquery中如何获取多个checkbox的值?
解答:选择器选中多个,然后获取每个元素的checked属性,var groupCheckbox=$("input[name='check']");
。 if(groupCheckbox[i].checked)
5、jquery中attr和prop给checkbox赋值checked属性的常用两种方法?
解答:键值对的形式,一种是赋值为true,一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。
6、jquery中checkbox主要的事件是哪两个?
解答:change和click。
7、jquery的方法一般套在什么函数里面?
解答:文档的ready函数里面。$(document).ready(function()。
8、jquery中如何选中属性name值为tisaccept的input元素?
解答:属性值加中括号,属性值里面是等号,属性的值用单引号,因为外面是双引号。$("input[name='tisaccept']")
9、jquery或者别的语言或者框架中,同一种方法获取值和设置值的通用方式?
解答:获取值只有键,设置值是先键后值,值一般是双引号,获取值:.prop("checked");设置值:.prop("checked","checked")。
单个和多个checkbox选中事件怎么写的更多相关文章
- 微信小程序CheckBox选中事件
1.微信小程CheckBox选中问题 <checkbox-group bindchange="checkboxChange" data-index="{{index ...
- javascript入门 之 ztree (十 checkbox选中事件)
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...
- checkbox选中事件的正确写法
判断选中CHECKBOX事件 网上各种扯淡 搞死我了..加上总觉得smarty引擎和JSJQ有很多冲突.. $("#id").is(":checked");
- easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中
DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...
- checkbox选中事件
在前端中,往往需要根据后台数据的返回选中多选框.可以根据后台返回的数据转化为数组,然后又val([数组])进行选中. 例子: html代码: <!DOCTYPE html> <htm ...
- 复选框 checkbox 选中事件
项目中用的jquery-1.11 今天需要检测一个checkbox的选中状态,想当然的用 .attr("checked") ,结果发现,无论是否选中,这个值都是 undefined ...
- jQuery radio change事件 checkbox选中事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- easyui datagrid checkbox选中事件
$('#grid_Order').datagrid({ onCheck: function(index, data) { //alert(data[0]); / ...
- 判断checkbox是否被选中事件
第一种////////////////////////////////////////////////////////<input type="checkbox" value ...
随机推荐
- Android 小米盒子游戏手柄按键捕获 - 能获取到的 home 键依旧是个痛
Android 小米盒子游戏手柄按键捕获 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
- MyCat中间件:读写分离(转)
利用MyCat中间件实现读写分离 需要两步: 1.搭建MySQL主从复制环境 2.配置MyCat读写分离策略 一.搭建MySQL主从环境 参考上一篇博文:MySQL系列之七:主从复制 二.配置MyCa ...
- 删除dataGridview中选中的一行或多行
一.实现的功能:可以删除一行或者多行数据,并在删除前提醒是否确定进行删除! DialogResult RSS = MessageBox.Show(this,"确定要删除选中行数据码?&quo ...
- spyder结束死循环的方法
Ctrl+C 用这个有时候也是不行的,因为如果一直有图片在闪,那么就是直接关了吧 之前记错了一直用ctrl+x不行 导致崩溃,不能重启spyder 但是没有敢再试
- POJ3984 迷宫问题 BFS
看题传送门:http://poj.org/problem?id=3984 BFS水一发 明天帮学弟挑电脑顺便去玩.接下来几天好好看数据结构.嗯哼. 这题标准的BFS应用,唯一需要注意的是需要输出中间的 ...
- UVA 11609 - Teams 组合、快速幂取模
看题传送门 题目大意: 有n个人,选一个或者多个人参加比赛,其中一名当队长,如果参赛者相同,队长不同,也算一种方案.求一共有多少种方案. 思路: 排列组合问题. 先选队长有C(n , 1)种 然后从n ...
- Java 开发规约插件
阿里巴巴 Java 开发规约插件初体验 阿里巴巴 Java 开发手册 又一次来谈<阿里巴巴 Java 开发手册>,经过这大半年的版本迭代,这本阿里工程师们总结出来避免写出那么多 Bug 的 ...
- zeros() 函数——MATLAB
zeros函数——生成零矩阵 ones函数——生成全1阵 [zeros的使用方法] B=zeros(n):生成n×n全零阵. B=zeros(m,n):生成m×n全零阵. B=zeros([m n]) ...
- CImage将图片转为指定像素大小
CFileDialog fDlg(true, "jpg", "", OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, &q ...
- 《SPA设计与架构》之MV*框架
原文 简书原文:https://www.jianshu.com/p/39f8f0aefdc2 大纲 1.认识MV*框架 2.传统UI设计模式 3.对框架的本质认识——框架有效性和框架分类 4.MV*基 ...