轉載 radio值獲取

時間 2019-11-18

標籤轉載 radio 獲取简体版

原文原文鏈接

選擇控件：select ，radio，checkbox之用jquery獲取選中值的小結

博客分類：

jQuery

select下拉框 radio單選按鈕 checkbox多選框 jquery獲取選中的值

最近是由於用到了checkbox ，須要用jquery獲取多選框的選擇值。雖然簡單，但其實本身仍是花了一小點時間的（由於不太熟……），因此整理一下。順便捎上了select下拉框，radio單選按鈕。下面用小的示例整理下如何獲取這些選擇控件所選中的值。前端

1、select下拉單選框jquery

測試頁面：數組

Html代碼

<label> select下拉框測試</label> <br/>
<select id="select">
<option value ="1">Volvo</option>
<option value ="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select><br/>
<input type="button" value="下拉框測試" onclick="submit1()" /> <br/>
<input type="button" value="下拉框設置選中" onclick="set1()" /><br/><br/>

測試js:測試

Js代碼

$(function(){
$("select").change(function() {//下拉框選項改變所觸發的事件
var index = $("select").get(0).selectedIndex;//獲取下拉框所選中項的索引
alert("選中的是第：" + (index+1) + "項!");
});
});
function submit1() {
var $selected = $("select").find("option:selected");//所選中的下拉框選項
var text= $selected.text();//所選中的文本（顯示在頁面的文本）
var val = $selected.val();//所選中的值（通常是提交給後臺的值）
alert("選中的text:" + text + " ,value:" + val);
}
function set1() {
var obj = $("select").find("option[value='2']");//指定vlaue爲2的下拉框選項(注意這種選擇器的寫法)
obj.attr("selected", true);//指定該選項被選中
}

測試：默認狀況下，select下拉框顯示的（即選中的）是第一項（索引爲0）；當選中第'Opel'項時 ,會彈出：選中的是第3項；點擊「下拉框測試」按鈕時，彈出：選中的text:Opel, value:3；點擊「下拉框設置選中」按鈕時，下拉框顯示選中的值會是：Saab。spa

注：上面var index = $("select").get(0).selectedIndex用get(0)是由於$("select")選擇器不能保證只獲得單個肯定的select下拉框（即便頁面只有一個select）,它獲得的會是一個select的數組。因此你須要獲得具體的select就須要用到下標了。xml

小結：關於常見的select的取值的用法已經在上述js中，select只可提交單個值（是value而非text）到後臺（經過name屬性）。對象

2、radio單選按鈕blog

測試頁面：索引

Html代碼

<label> radio單選框測試</label> <br/>
<input type="radio" name="danx" value="sd" checked="checked" />學生
<input type="radio" name="danx" value="tea" />教師
<input type="radio" name="danx" value="adm" />管理員 <br/>
<input type="button" value="單選按鈕測試" onclick="submit2()" /> <br/>
<input type="button" value="單選框設置選中" onclick="set2()" /><br/><br/>

測試js:事件

Js代碼

$(function(){
$("input:radio").click(function() {
alert("改變了選擇");//單選按鈕的點擊事件還有blur focus事件
});
});
function set2() {
var $checked = $("input[type=radio]").eq(2);//單選按鈕中索引爲2的選項（"管理員"選項）
//$checked.attr("checked", true);
var $checked2 = $("input:radio[value='tea']");//單選按鈕中value爲tea的選項
$checked2.attr("checked", true);
}
function submit2() {
var $radio = $("input[type='radio']:checked");//獲取選中的選項
var val = $radio.val();//獲取選中的選項的值value
alert("選中的val:" + val);

測試：同理，在默認狀況下，單選按鈕顯示的選中的值是第一個。當我選中「教師」選項，時，會彈出「改變了選擇」字樣。當我選擇了"教師"選項時，會彈出：「選中的val:tea」。點擊「單選框設置選中」按鈕時，會發現頁面的「教師」選項被選中。提交給後臺的便是選中的val（經過name屬性）；

上述簡單的js已經說明了常見的radio單選按鈕選中的值的用法。須要注意的是：通常radio單選按鈕的各選項，name值必須各異，不然能夠多選，從而違背單選的初衷。

3、checkbox多選框

測試頁面：

Html代碼

<label>多選框測試</label> <br/>
<label>選項1</label><input name="checkbox" type="checkbox" value="value1" />
<label>選項2</label><input name="checkbox" type="checkbox" value="value2" />
<label>選項3</label><input name="checkbox" type="checkbox" value="value3" />
<label>選項4</label><input name="checkbox" type="checkbox" value="value4" /><br/>
t;input type="button" value="多選按鈕測試" onclick="submit3()" />

測試js:

Js代碼

function submit() {
$checkbox = $("input[name='checkbox']:checked");//這裏的這種選擇器是關鍵
alert($checkbox.length);
if($checkbox) {//表示有選中的多選框，此時爲true；若是沒有一個選中，這裏會是false
for(var i=0; i<$checkbox.length; i++) {
alert($checkbox[i].value);//選中項的值
}
}
}

測試：點擊「多選按鈕測試」按鈕時，當全不選時，彈出0（選中的數組的長度）。當選中第1、三時，依次彈出：2 value1 value3;當選中第2、3、四時，依次彈出：3 value1 value3 value4 以此類推……

但若是你直接嘗試$checkbox的話，獲得的永遠是數組第一個元素的值！！

同理，控制選項選中與否的語法爲：$checkbox[i].attr("checked", true)——選中， $checkbox[i].attr("checked", false)——不選中。

注：checkbox選中項永遠是一個【數組】，這跟上面select和radio單選控件是不同的，單選控件選項永遠是單個對象，而checkbox哪怕你只選中一項，他也是一個只有一個元素的數組，此時當你想要用該選中項的語法時，必須是用get(0)或[0]來獲得具體的對象。（而關於checkbox提交給後臺的值(name屬性)，是由前端Js控制的，能夠是用，分隔的字符串也能夠是字符串數組）

還需注意的一點是：通常狀況下：只有jquery的id選擇器能夠獲得確切的jquery對象，其餘選擇器諸如name選擇器，class選擇器等等，通常獲得的是【jquery對象數組】，想取其中某個具體的對象，須要用下標[n]，但用了下標也只是取到一個js對象，須要再次用$包裝起來纔是一個jq對象。如：

Java代碼