單個和多個checkbox選中事件怎么寫

本文轉載自查看原文 2018-06-04 23:01 9988 js進階課程/ 1_JavaScript

單個和多個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>

change方法應該也是可以的，選事件方法的時候就最先選click和change。

五、測試題-簡答題