單選框 radio總結(jié): 一、頁面樣式截圖: <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1"/> <label for="killOrder1">是</label> </div> <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder2" value="0" checked/> <label for="killOrder2">否</label> </div> 使用label標簽可以點擊文字就能選中單選框或者是取消選擇單選框 label標簽的兩種使用方法: https://blog.csdn.net/qq_40015157/article/details/110850331 二,、js原生 1,、js原生獲取選中的值 var tesObj = document.getElementsByName("killOrder"); //獲取選中的值 for(var i=0; i < tesObj.length; i++){ if (tesObj[i].checked==true){ alert(tesObj[i].value+' 是選中的value值'); break; } } 2、js原生設置選中 var tesObj = document.getElementsByName("killOrder"); //設置value值為0選中 for(var i=0; i < tesObj.length; i++){ if (tesObj[i].value=="0"){ tesObj[i].checked = true; break; } } 三,、jquery 1.獲取值 $("input[name='killOrder']:checked").val(); $('input:radio:checked').val(); $("input[type='radio']:checked").val(); $(":radio[checked]").each(function(radio){alert($(this).val()); 注意:有時attr() 無法起到作用,,attr() 與 prop() 的區(qū)別詳見文章。 https://blog.csdn.net/qq_40015157/article/details/110823718 2.設置第一個radio為選中值: $('input:radio:first').prop('checked', 'checked'); $('input:radio:first').prop('checked', true); $('input:radio:first').attr('checked', 'checked'); $('input:radio:first').attr('checked', true); 3.設置最后一個radio為選中值: $('input:radio:last').prop('checked', 'checked'); $('input:radio:last').prop('checked', true); $('input:radio:last').attr('checked', 'checked'); $('input:radio:last').attr('checked', true); 4.根據(jù)索引值設置任意一個radio為選中值: $('input:radio').eq(索引值).prop('checked', true);//索引值=0,1,2.... $('input:radio').slice(1,2).prop('checked', true); $('input:radio').eq(索引值).attr('checked', true);//索引值=0,1,2.... $('input:radio').slice(1,2).attr('checked', true); 5.根據(jù)value值設置radio為選中值 $("input:radio[value='2']").prop('checked', true); $("input[value='1']").prop('checked', true); $("input[name='killOrder'][value='1']").prop("checked", "checked"); let v = 1;//變量 $("input[name='killOrder'][value='" + v + "']").prop("checked", true); $("input:radio[value='2']").attr('checked', true); $("input[value='1']").attr('checked', true); 6.刪除value值為2的radio $("input:radio[value='2']").remove(); 7.刪除第幾個radio $("input:radio").eq(索引值).remove();//索引值=0,1,2.... //如刪除第3個radio:$("input:radio").eq(2).remove(); 8.遍歷radio $('input:radio').each(function(index,domEle){ //寫入代碼 }); 9.修改單選框樣式 input[type="radio"] + label::before { content: "\a0"; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-right: 5px; border-radius: 50%; text-indent: .15em; margin-bottom: 4px; border: 1px solid #CCCCCC; } input[type="radio"]:checked + label::before { background-color: #4A90E2; background-clip: content-box; padding: 2px; } input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); } .radio-inline{ padding-left: 0; } input[type=radio][disabled]:checked + label::before{ background-color:#CCCCCC; background-clip: content-box; padding: 2px; } 復選框總結(jié) : https://blog.csdn.net/qq_40015157/article/details/110819778 全選反選 :https://blog.csdn.net/qq_40015157/article/details/110661715 https://blog.csdn.net/qq_40015157/article/details/80693777 輸入框: https://blog.csdn.net/qq_40015157/article/details/80692543 ———————————————— 版權聲明:本文為CSDN博主「程序媛zcx」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權協(xié)議,,轉(zhuǎn)載請附上原文出處鏈接及本聲明,。 原文鏈接:https://blog.csdn.net/qq_40015157/article/details/80692296 JQuery控制radio選中和不選中方法總結(jié)一、設置選中方法 $("input[name='名字']").get(0).checked=true; 二,、設置選中和不選中示例 <input type="radio" value="0" name="jizai" id="0"/>否 通過name $("input:radio[name="analyfsftype"]").eq(0).attr("checked",'checked'); 通過id $("#tradeType0").attr("checked","checked"); 三,、另一種設置選中方法 <script type="text/javascript"> 您的性別: <input type="radio" name="sex" value="1" <s:if test="user.sex==1">checked</s:if>/>男 四,、根據(jù)值設置radio選中 $("input[name='radio_name'][value='要選中Radio的Value值']").attr("checked",true); //根據(jù)Value值設置Radio為選中狀態(tài) 五、使用prop方法操作示例 $('input').removeAttr('checked'); JQuery radio(單選按鈕)操作方法匯總隨著Jquery的作用越來越大,,使用的朋友也越來越多,。在Web中,由于CheckBox,、Radiobutton ,、DropDownList等控件使用的頻率比較高,就關系到這些控件在Jquery中的操作問題,。由于Jquery的版本更新很快,,代碼的寫法也改變了許多,以下Jquery代碼適query1.4版本以上,。 1.獲取選中值,,三種方法都可以: $('input:radio:checked').val(); 2.設置第一個Radio為選中值: $('input:radio:first').attr('checked', 'checked'); 或者 $('input:radio:first').attr('checked', 'true'); 注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true) 3.設置最后一個Radio為選中值: $('input:radio:last').attr('checked', 'checked'); 或者 $('input:radio:last').attr('checked', 'true'); 4.根據(jù)索引值設置任意一個radio為選中值: $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者 $('input:radio').slice(1,2).attr('checked', 'true'); 5.根據(jù)Value值設置Radio為選中值 $("input:radio[value='rd2']").attr('checked','true'); 或者 $("input[value='rd2']").attr('checked','true'); 6.刪除Value值為rd2的Radio $("input:radio[value='rd2']").remove(); 7.刪除第幾個Radio $("input:radio").eq(索引值).remove();索引值=0,1,2.... 如刪除第3個Radio:$("input:radio").eq(2).remove(); 8.遍歷Radio $('input:radio').each(function(index,domEle){ //寫入代碼 }); jquery判斷單選按鈕radio是否選中的方法本文實例講述了jquery判斷單選按鈕radio是否選中的方法,。分享給大家供大家參考,。具體如下: html代碼如下:
1. 加載頁面的時候獲取id
2.點擊按鈕的時候獲取id
|
|