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

时间 2020-05-29

标签单个多个 checkbox 选中事件怎么栏目 HTML 繁體版

原文原文链接

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

1、总结

一句话总结：

一、checkbox的事件方法的话主要是change和clickjavascript

二、checkbox的属性判断的话主要是prop（判断checked和赋值checked）和attr（赋值checked）和is（判断checked），注意不一样版本的不一样用法php

一、jquery中不一样版本的方法使用是否同样？

解答：不同，因此咱们要注意版本。html

二、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性，不该使用attr,这句话对么？

解答：对的，attr在1.6版本以后被改为作判断的了。java

三、jquery中如何经过prop方法获取checked属性？

解答：用prop直接获取checked值，var aaa = $("#check").prop("checked");获取的checked返回值为boolean，选中为true,不然为flase。jquery

四、jquery中如何获取多个checkbox的值？

解答：选择器选中多个，而后获取每一个元素的checked属性，var groupCheckbox=$("input[name='check']"); if(groupCheckbox[i].checked)。ios

五、jquery中attr和prop给checkbox赋值checked属性的经常使用两种方法？

解答：键值对的形式，一种是赋值为true，一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。数组

六、jquery中checkbox主要的事件是哪两个？

解答：change和click。markdown

七、jquery的方法通常套在什么函数里面？

解答：文档的ready函数里面。$(document).ready(function()。框架

八、jquery中如何选中属性name值为tisaccept的input元素？

解答：属性值加中括号，属性值里面是等号，属性的值用单引号，由于外面是双引号。$("input[name='tisaccept']")函数

九、jquery或者别的语言或者框架中，同一种方法获取值和设置值的通用方式？

解答：获取值只有键，设置值是先键后值，值通常是双引号，获取值：.prop("checked")；设置值：.prop("checked","checked")。

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

一、单个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("选中");
 };

三、获取多个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方法获取时：
一、若是当前input中初始化未定义checked属性，则无论当前是否中，$(“#check”).attr(“checked”)都会返回undefined；

二、若是当前input中初始化已定义checked属性，则不论是否选中，$(“#selectAll”).attr(“checked”)都会返回checked.

二、多个checkbox的点击事件

$(function(){
    var s = $("input[name='check']");
    s.each(function(i) {
// alert(i);
            $(this).click(function(){
                if(this.checked==true){
                      alert(this.value);
                }
             });
        }); 
})

3、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!");
});
});

4、本身实例

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>

change方法应该也是能够的，选事件方法的时候就最早选click和change。

5、测试题-简答题

一、jquery中不一样版本的方法使用是否同样？

解答：不同，因此咱们要注意版本。

二、html中单个checkbox的点击事件使用jquery,应使用prop方法来获取和设置checked属性，不该使用attr,这句话对么？

解答：对的，attr在1.6版本以后被改为作判断的了。

三、jquery中如何经过prop方法获取checked属性？

解答：用prop直接获取checked值，var aaa = $("#check").prop("checked");获取的checked返回值为boolean，选中为true,不然为flase。

四、jquery中如何获取多个checkbox的值？

解答：选择器选中多个，而后获取每一个元素的checked属性，var groupCheckbox=$("input[name='check']"); if(groupCheckbox[i].checked)。

五、jquery中attr和prop给checkbox赋值checked属性的经常使用两种方法？

解答：键值对的形式，一种是赋值为true，一种是赋值为值。$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 。

六、jquery中checkbox主要的事件是哪两个？

解答：change和click。

七、jquery的方法通常套在什么函数里面？

解答：文档的ready函数里面。$(document).ready(function()。

八、jquery中如何选中属性name值为tisaccept的input元素？

解答：属性值加中括号，属性值里面是等号，属性的值用单引号，由于外面是双引号。$("input[name='tisaccept']")

九、jquery或者别的语言或者框架中，同一种方法获取值和设置值的通用方式？

解答：获取值只有键，设置值是先键后值，值通常是双引号，获取值：.prop("checked")；设置值：.prop("checked","checked")。