单个和多个checkbox选中事件怎么写

最新推荐文章于 2024-09-23 15:38:48 发布

weixin_33834075

最新推荐文章于 2024-09-23 15:38:48 发布

阅读量475

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9136452.html

版权

单个和多个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：

 1 <head>
 2     {include file="common/headItems" /}
 3     <script>
 4         // 是否接受任务选项框事件
 5         //alert("接受任务成功");
 6         $(document).ready(function(){
 7             //alert("接受任务成功");
 8             //奇怪，这里用.tisaccept会错 因为class才是. #是id
 9             $("input[name='tisaccept']").click(function(){
10                 //alert("接受任务成功");
11                 var isAccept = $("input[name='tisaccept']").prop("checked");
12                 //alert(isAccept);
13                 if(isAccept){
14                     alert("接受任务成功");
15                     //$("#tisaccept").prop("checked",false);
16                 }else{
17                     alert("取消任务成功");
18                     //$("#tisaccept").prop("checked",true);
19                 }
20             });
21         });
22     </script>
23 </head>

1 <div class="tpl-switch">
2     <input type="checkbox"  name="tisaccept" class="ios-switch bigswitch tpl-switch-btn" {php}if($vo['tisaccept']) echo 'checked';{/php} />
3     <div class="tpl-switch-btn-view">
4         <div>
5         </div>
6     </div>
7 </div>