checkbox的使用总结,判断是否选中
生活随笔
收集整理的這篇文章主要介紹了
checkbox的使用总结,判断是否选中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一:
1 if ($("#checkbox-id").get(0).checked) {
2 // do something
3 }
方法二:
1 if($('#checkbox-id').is(':checked')) {
2 // do something
3 }
方法三:
1 if ($('#checkbox-id').attr('checked')) {
2 // do something
3 }
方法四:
1 if ($('#checkbox-id').prop("checked")) {
2 // do something
3 }
方法五://屬于原生js的方法,存在一點弊端
1 if (ele.checked) {
2 // do something
3 }
一,$(ele).is(":checked")
1 function IsSelect(ele){
2 //判斷checkbox是否被選中
3 if($(ele).is(":checked")){
4 alert('選中');
5 alert($(ele).val())
6 }
7 else{
8 alert('未選中');
9 }
10 }
二,$(ele).prop("checked")
1 //用jquery全選所有class為listbox的checkbox
2 $(".listbox").prop("checked", true);
3 //用jquery取消所有class為listbox的checkbox的選中
4 $(".listbox").prop("checked", false);
5
三,使用 attr 方法設置選擇。
1 $(function(){
2 var checkbox = $("input[type='checkbox']");
3 //全選
4 $('#select-all').click(function(){
5 checkbox.attr('checked', true);
6 });
7 //反選
8 $('#select-reverse').click(function(){
9 checkbox.each(function(i, dom){
10 if ( $(dom).attr('checked') ) {
11 $(dom).removeAttr('checked');
12 } else {
13 $(dom).attr('checked', 'checked');
14 }
15 });
16 });
17 });
四,對于jQuery 1.6.0+ 的版本,可以使用prop方法來設置是否選中。
1 $(function(){
2 var checkbox = $("input[type='checkbox']");
3 //全選
4 $('#select-all').click(function(){
5 checkbox.prop("checked", true);
6 });
7 //反選
8 $('#select-reverse').click(function(){
9 checkbox.prop("checked", function(index, attr){
10 return !attr;
11 });
12 });
13 });
五,jQuery中attr和prop方法的區別
prop是jquery1.6新增的方法,其與attr的用法極為相似。由于不理解他們的根本區別,難免產生離奇的BUG。
通過分析attr和prop的源碼,得知:
attr方法里面,最關鍵的兩行代碼,elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),很明顯的看出來,使用的DOM的API setAttribute和getAttribute方法操作的屬性元素節點。
而prop方法里面,最關鍵的兩行代碼,return ( elem[ name ] = value )和return elem[ name ],你可以理解成這樣document.getElementById(el)[name] = value,這是轉化成JS對象的一個屬性。
原文:https://www.cnblogs.com/jackson-yqj/p/7819466.html
總結
以上是生活随笔為你收集整理的checkbox的使用总结,判断是否选中的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 性能测评工具lighthouse的基本使
- 下一篇: 郭昶