快捷導(dǎo)航

基于jQuery的獲得各種控件Value的方法

更新時(shí)間：2010年11月19日 18:47:11 作者：

jQuery獲得各種控件Value的方法，使用jquery的朋友可以參考下。

HTML代碼

 
<asp:RadioButtonList ID="RadioButtonList1" runat="server"> 
<asp:ListItem>1</asp:ListItem> 
<asp:ListItem>2</asp:ListItem> 
<asp:ListItem>3</asp:ListItem> 
<asp:ListItem>4</asp:ListItem> 
</asp:RadioButtonList> 
<div style="text-align: left"> 
<a id="btnGetRadioButtonListValue" href="javascript:">通過(guò)Type獲得RadioButtonList的Value</a> 
</div> 
<br /> 
<div style="text-align: left"> 
<input type="radio" name="radioSelect" value="A" />A<br /> 
<input type="radio" name="radioSelect" value="B" />B<br /> 
<input type="radio" name="radioSelect" value="C" />C<br /> 
<input type="radio" name="radioSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetRadioValue" href="javascript:">通過(guò)Name獲得Radio的Value</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<input type="checkbox" name="chkSelect" value="A" />A<br /> 
<input type="checkbox" name="chkSelect" value="B" />B<br /> 
<input type="checkbox" name="chkSelect" value="C" />C<br /> 
<input type="checkbox" name="chkSelect" value="D" />D<br /> 
</div> 
<div style="text-align: left"> 
<a id="btnGetCheckBoxValue" href="javascript:">通過(guò)Name獲得CheckBox的Value</a> <a id="btnSelectAllOn" href="javascript:">全選</a> <a id="btnSelectAllOff" href="javascript:">反選</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="multiple1" multiple="multiple" style="width: 300px; height: 300px;"> 
<option value="A1">A1</option> 
<option value="A2">A2</option> 
<option value="A3">A3</option> 
<option value="A4">A4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetMultipleValue" href="javascript:">獲得Multiple的Value</a> <a id="btnAddMultipleOption" href="javascript:">添加</a> <a id="btnRemoveMultipleOption" href="javascript:">移除</a> 
</div> 
<br /> 
<br /> 
<div style="text-align: left"> 
<select id="select1"> 
<option value="B1">B1</option> 
<option value="B2">B2</option> 
<option value="B3">B3</option> 
<option value="B4">B4</option> 
</select> 
</div> 
<div style="text-align: left"> 
<a id="btnGetSelectValue" href="javascript:">獲得Select的Value</a> <a id="btnAddSelectOption" href="javascript:">添加</a> <a id="btnRemoveSelectOption" href="javascript:">移除</a> 
</div> 

jQuery代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function () { 
//獲得RadioButtonList的Value 
$("#btnGetRadioButtonListValue").click(function () { 
if ($("input[type=radio]:checked").val() == null) { 
alert("請(qǐng)選擇"); 
return false; 
} 
alert($("input[type=radio]:checked").val()); 
}); 
//獲得Html的Radio的Value 
$("#btnGetRadioValue").click(function () { 
if ($("input[name='radioSelect']:checked").val() == null) { 
alert("請(qǐng)選擇"); 
return false; 
} 
alert($("input[name='radioSelect']:checked").val()); 
}); 
//獲得CheckBox的Value 
$("#btnGetCheckBoxValue").click(function () { 
var values = ""; 
$("input[name='chkSelect']").each(function () { 
if ($(this).attr("checked")) { 
values += $(this).val() + ","; 
} 
}); 
if (values == "") { 
alert("請(qǐng)選擇"); 
return false; 
} 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//全選 
$("#btnSelectAllOn").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", true); 
}); 
}); 
//返選 
$("#btnSelectAllOff").click(function () { 
$("input[name='chkSelect']").each(function () { 
$(this).attr("checked", false); 
}); 
}); 
//獲得Multiple的值 
$("#btnGetMultipleValue").click(function () { 
var values = ""; 
$("#multiple1 option:selected").each(function () { 
values += $(this).val() + ","; 
}) 
values = values.substring(0, values.length - 1); //去掉尾部, 
alert(values); 
}); 
//添加Multiple的Option 
$("#btnAddMultipleOption").click(function () { 
$("#multiple1").append("<option value='AX'>AX</option>"); 
}); 
//移除Multiple所選Option 
$("#btnRemoveMultipleOption").click(function () { 
$("#multiple1 option").remove("option:selected"); 
}); 
//獲得Select的值 
$("#btnGetSelectValue").click(function () { 
alert($("#select1 option:selected").val()); 
}); 
//添加Select的Option 
$("#btnAddSelectOption").click(function () { 
$("#select1").append("<option value='BX'>BX</option>"); 
}); 
//移除Select所選Option 
$("#btnRemoveSelectOption").click(function () { 
$("#select1 option").remove("option:selected"); 
}); 
}); 
</script> 