jQuery操作複選框checkbox方法
阿新 • • 發佈:2022-05-19
一、jQuery判斷checked是否是選中狀態的三種方法:
$("#cb1").attr('checked') // 返回:"checked"或"undefined"; $("#cb1").prop('checked') // 返回true/false $("#cb1").is(':checked') // 返回true/false //別忘記冒號哦
二、jQuery賦值checked的幾種寫法: 所有的jQuery版本都可以這樣賦值,不建議用attr();
$("#cb1").attr("checked","checked"); //通用做法,現在不推薦 $("#cb1").attr("checked",true); //不標準,不推薦 $("#cb1").attr("checked","true"); //不標準,不推薦 //jQuery的prop()的4種賦值(推薦如下寫法): $("#cb1").prop("checked",true); //標準寫法,推薦! $("#cb1").prop({checked:true}); //map鍵值對 $("#cb1").prop("checked",function(){ return true;//函式返回true或false }); //$("#cb1").prop("checked","checked"); //不標準
三、jQuery操作checkbox技巧總結
1.獲取單個checkbox選中項的值(三種寫法)
$("#chx1").find("input:checkbox:checked").val() //或者 $("#chx1").find("input:[type='checkbox']:checked").val(); $("#chx1").find("input[type='checkbox']:checked").val(); //或者 $("#chx1").find("input:[name='ck']:checked").val(); $("#chx1").find("input[name='ck']:checked").val();
2.獲取多個checkbox選中項
$("#chk1").find('input:checkbox').each(function() { //遍歷所有複選框 if ($(this).prop('checked') == true) { console.log($(this).val()); //列印當前選中的複選框的值 } }); function getCheckBoxVal(){ //jquery獲取所有選中的複選框的值 var chk_value =[]; $("#chk1").find('input[name="test"]:checked').each(function(){ //遍歷,將所有選中的值放到陣列中 chk_value.push($(this).val()); }); alert(chk_value.length==0 ?'你還沒有選擇任何內容!':chk_value); }
3.設定第一個checkbox 為選中值
$("#chk1").find('input:checkbox:first').prop("checked",true); //或者 $("#chk1").find('input:checkbox').eq(0).prop("checked",true);
4.設定最後一個checkbox為選中值
$("#chk1").find('input:checkbox:last').prop("checked",true);
5.根據索引值設定任意一個checkbox為選中值
$("#chk1").find('input:checkbox').eq(索引值).prop('checked', true); //索引值=0,1,2.... //或者 $("#chk1").find('input:checkbox').slice(1,2).prop('checked', true); //同時選中第0個和第1個checkbox //從索引0開始(包含),到索引2(不包含)的checkbox
6.根據value值設定checkbox為選中值
$("#chk1").find("input:checkbox[value='1']").prop('checked',true); $("#chk1").find("input[type='checkbox'][value='1']").prop('checked',true);
7.刪除checkbox:①刪除value=1的checkbox ②刪除第幾個checkbox
$("#chk1").find("input:checkbox[value='1']").remove(); //將匹配元素從DOM中刪除,將標籤從頁面上刪除了 $("#chk1").find("input:checkbox").eq(index).remove(); //索引值 index=0,1,2.... //如刪除第3個checkbox: $("#chk1").find("input:checkbox").eq(2).remove();
8.全部選中或全部取消選中
$("#chk1").find('input:checkbox').each(function() { $(this).prop('checked', true); }); //或者 $("#chk1").find('input:checkbox').each(function () { $(this).prop('checked',false); });
9.選中所有奇數項或偶數項
$("#chk1").find("input[type='checkbox']:even").prop("checked",true); //選中所有偶數 $("#chk1").find("input[type='checkbox']:odd").prop("checked",true); //選中所有奇數
四.反選
/*方法一:*/ $("#btn4").click(function(){ $("input[type='checkbox']").each(function(){ //反選 if($(this).prop("checked")){ $(this).prop("checked",false); } else{ $(this).prop("checked",true); } }); }); /*方法二:*/ $("#btn4").on('click',function(){ //反選所有的複選框(沒選中的改為選中,選中的改為取消選中) $("#chk1").find("input[type='checkbox']").prop("checked", function(index, oldValue){ return !oldValue; }); }
原文連結:https://blog.csdn.net/xuweisen/article/details/109327767