1. 程式人生 > 實用技巧 >jquery獲取和操作表單元素輸入框 下拉框 單選 複選框

jquery獲取和操作表單元素輸入框 下拉框 單選 複選框

checkbox 多選框的操作。
1、可以通過name選擇器選中checkbox進行遍歷,在點選時候增加方法 :
$("input[name='checkboxname']").each(function(){
//遍歷時候增加方法
$(this).click(function(){
var checked = $(this).is('checked'); //判斷當前是否是選中狀態。 返回 true false
var checkval = $(this).val();
});
});
2、設定checkbox 選擇中狀態
$("#checkid").prop("checked",true);
3、 設定checkbox不可勾選,不可編輯
$("#checkid").attr('disabled',true);
//獲得選中的checked的長度
$("input:radio[name='checkboxname1']:checked").length;
4、jquery 設定頁面元素不可點選、不可編輯、只讀(備忘)
$("input").attr('readonly', true); //輸入框只讀
$("textarea").attr('readonly', true); //textarea只讀
$(':radio').attr('disabled', true); // radio 只讀不可選
$(':checkbox').attr('disabled', true);
$(':button').attr('disabled', true); //按鈕不可點選
$('a').removeAttr('onclick'); //a標籤去掉點選事件
$('select').attr('disabled', true); //下拉框不可選

5、通過獲取radio的值, 判斷是否選擇了 radio
$("input[type='radio']").click(function(){
var inputval=$("input:radio[name='radioname1']:checked").val();
if(inputval==undefined){ alert("請選擇radio");}
if(inputval!=""){
alert(inputval);//name為radioname1的radio 沒有選擇
}
})

//選擇的radio的值。
  $("input:radio[name='jinbei']:checked").val();
//給選中的增加屬性
  $("input:radio[name='jinbei']:checked").attr("class");

//獲得 radio 是否是選中狀態
var radioischecked = $("#radioid").id(":checked"); //返回 true 或者false;

6、設定 下拉框 指定值被選中
$("#selectid option:first").prop("selected","selected");

7、關於select 下拉框的更多操作:獲取Select :

獲取select 選中的 text :

$("#ddlRegType").find("option:selected").text();

設定select的value為0的為選中狀態。
$("#selectid").val("0");

獲取select選中的 value:
$("#ddlRegType").val();
獲取select選中的索引:
$("#ddlRegType ").get(0).selectedIndex;
設定select:
設定select 選中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index為索引值
設定select 選中的value:
$("#ddlRegType ").attr("value","Normal“);

$("#ddlRegType ").val("Normal");

$("#ddlRegType ").get(0).value = value;

設定select 選中的text:

var count=$("#ddlRegType option").length;
for(var i=0;i<count;i++)
{ if($("#ddlRegType ").get(0).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;
break;
}
}
$("#select_id option[text='jQuery']").attr("selected", true);
設定select option項:
$("#select_id").append(""); //新增一項option

$("#select_id").prepend(""); //在前面插入一項option

$("#select_id option:last").remove(); //刪除索引值最大的Option

$("#select_id option[index='0']").remove();//刪除索引值為0的Option

$("#select_id option[value='3']").remove(); //刪除值為3的Option

$("#select_id option[text='4']").remove(); //刪除TEXT值為4的Option

清空 Select:

$("#ddlRegType ").empty();