這篇文章主要為大家展示了“jQuery如何操作radio、checkbox、select”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery如何操作radio、checkbox、select”這篇文章吧。
創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、嵩縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為嵩縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
1、radio：?jiǎn)芜x框
HTML代碼：
1
2
3
4
js操作代碼：
// 判斷有沒有單選框被選中
jQuery("input[type='radio'][name='radio']:checked").length == 0 ? "沒有任何單選框被選中" : "已經(jīng)有選中";
// 獲取一組radio被選中項(xiàng)的值
jQuery('input[type="radio"][name="radio"]:checked').val();
// 設(shè)置value = 2的一項(xiàng)為選中
jQuery("input[type='radio'][name='radio'][value='2']").attr("checked", "checked");
// 設(shè)置id=radio2的一項(xiàng)為選中
jQuery("#radio2").attr("checked", "checked");
// 設(shè)置index = 1，即第二項(xiàng)為當(dāng)前選中
jQuery("input[type='radio'][name='radio']").get(1).checked = true;
// id=radio2的一項(xiàng)處于選中狀態(tài)則isChecked = true, 否則isChecked = false;
var isChecked = jQuery("#radio2").attr("checked");
// value=2的一項(xiàng)處于選中狀態(tài)則isChecked = true, 否則isChecked = false;
var isChecked = jQuery("input[type='radio'][name='radio'][value='2']").attr("checked");
2、checkbox：復(fù)選框
HTML代碼：
全選/取消全選
1
2
3
4
5
js操作代碼：
// 獲取指定id的復(fù)選框的值
var val = jQuery("#checkbox_id1").val();
// 判斷id=checkbox_id3的那個(gè)復(fù)選框是否處于選中狀態(tài)，
// 選中則isSelected=true;否則isSelected=false;
var isSelected = jQuery("#checkbox_id3").attr("checked");
jQuery("#checkbox_id3").attr("checked", true);// or
// 將id=checkbox_id3的那個(gè)復(fù)選框選中，即打勾
jQuery("#checkbox_id3").attr("checked", 'checked');
jQuery("#checkbox_id3").attr("checked", false);// or
// 將id=checkbox_id3的那個(gè)復(fù)選框不選中，即不打勾
jQuery("#checkbox_id3").attr("checked",'');
// 將name=checkbox, value=3 的那個(gè)復(fù)選框選中，即打勾
jQuery("input[name=checkbox][value=3]").attr("checked",'checked');
// 將name=checkbox, value=3 的那個(gè)復(fù)選框不選中，即不打勾
jQuery("input[name=checkbox][value=3]").attr("checked",'');
// 設(shè)置index = 2，即第三項(xiàng)為選中狀態(tài)
jQuery("input[type=checkbox][name=checkbox]").get(2).checked=true;
//由于復(fù)選框一般選中的是多個(gè),所以可以循環(huán)輸出選中的值
jQuery("input[type=checkbox]:checked").each(function(){alert(jQuery(this).val()); });
// 全選/取消全選
jQuery(function() {
jQuery("#checkAll").click(function(){
if(jQuery(this).attr("checked") == true){// 全選
jQuery("input[type=checkbox][name=checkbox]").each(function(){
jQuery(this).attr("checked", true);
});
} else {// 取消全選
jQuery("input[type=checkbox][name=checkbox]").each(function(){
jQuery(this).attr("checked", false);
});
}
});
});
3、select：下拉框
HTML代碼：
js操作代碼：
// 為Select添加事件，當(dāng)選擇其中一項(xiàng)時(shí)觸發(fā)
jQuery("#select_id").change(function(){});
// 獲取Select選中項(xiàng)的Value
var checkValue = jQuery("#select_id").val();
// 獲取Select選中項(xiàng)的Text
var checkText = jQuery("#select_id :selected").text();
// 獲取Select選中項(xiàng)的索引值
var checkIndex = jQuery("#select_id").attr("selectedIndex");
// or
jQuery("#select_id").get(0).selectedIndex;
// 5.獲取Select最大的索引值
var maxIndex = jQuery("#select_id :last").attr("index");
// or
jQuery("#select_id :last").get(0).index;
// jQuery設(shè)置Select的選中項(xiàng)
// 設(shè)置Select索引值為1的項(xiàng)選中
jQuery("#select_id").get(0).selectedIndex = 1;
// 設(shè)置Select的Value值為4的項(xiàng)選中
jQuery("#select_id").val(4);
// jQuery添加/刪除Select的Option項(xiàng)
// 為Select追加一個(gè)Option(下拉項(xiàng))
jQuery("#select_id").append("");
// 為Select插入一個(gè)Option(第一個(gè)位置)
jQuery("#select_id").prepend("");
// 刪除Select中索引值為1的Option(第二個(gè))
jQuery("#select_id").get(0).remove(1);
// 刪除Select中索引值最大Option(最后一個(gè))
jQuery("#select_id :last").remove();
// 刪除Select中Value='3'的Option
jQuery("#select_id [value='3']").remove();
// 清空下拉列表 jQuery("#select_id").empty();
以上是“jQuery如何操作radio、checkbox、select”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
