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