2012-06-05 97 views
8

我想檢查多個單選按鈕,所有單選按鈕具有相同的名稱,但具有不同的ID。如何檢查多個單選按鈕,具有相同名稱的單選按鈕?

這裏是我的html代碼,

<span style="float:left;margin:0 0 0 10px">Proactivity</span> 
     <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Proactivity > Poor" name="q11[]">Poor</label> 
     <label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Proactivity > Good" name="q11[]">Good</label> 

     <br/><br/> 
     <span style="float:left;margin:0 0 0 10px">Service/support</span> 
     <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Service/support > Poor" name="q11[]">Poor</label> 
     <label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Service/support > Good" name="q11[]">Good</label> 

     <br/><br/> 
     <span style="float:left;margin:0 0 0 10px">Provision of <br />specialist skills</span> 
     <label for="q11" style="width:auto;margin:0 60px 0 0;padding:0;"><input type="radio" id="qq[]" class="styled" value="Provision of specialist skills > Poor" name="q11[]">Poor</label> 
     <label for="q11" style="width:auto;margin:0 18px 0 0;padding:0;"><input type="radio" id="qqa[]" class="styled" value="Provision of specialist skills > Good" name="q11[]">Good</label> 
+3

您**不能**有多個具有相同ID的元素,所有ID必須是唯一的。所有這些'id =「qq []」'和'id =「qqa []」'都需要改變。 –

+0

更不用說指向相同元素的標籤了。 –

回答

12

你不能。單選按鈕有單選。對於多種選擇,您需要複選框。

+0

我使用複選框,但是當我點擊「好」時,應該取消選中「差」 – Symfony

+0

然後使用收音機框,每個「收音機組」組需要具有相同的唯一名稱。另一組收音機盒需要有不同的名稱。 –

+0

但是當我需要相同的名稱在數據庫中插入值 – Symfony

2

使用單選按鈕選擇多個項目似乎違反可用性規則。如果你這樣做,你可以爲他們提供不同的名字。 PS:你應該爲每個單選按鈕提供一個外部樣式表。如果您想稍後進行調整,這將非常棒。

3

當您對所有無線電輸入使用相同的名稱時,它們都歸入一組。它不會讓你做出單獨的行動。

你必須使用不同的名稱爲每個無線組

7

包裝一下你的單選按鈕形式的標籤將允許具有相同名稱的單選按鈕組相互獨立運行。

http://jsfiddle.net/8qB56/

但看你正在嘗試做的,它更適合你改變每個邏輯問題的輸入名字,因爲你是用什麼看起來像一個單一的形式工作。

因此,也許你可以改變name="q11[]"name="q11[proactivity]"的積極性問題的投入,name="q11[service]"對服務問題的投入,併爲name="q11[provision]"提供問題的投入。

這樣做將允許所有從這些輸入中選擇的響應停留在服務器端的q11字段中,然後您可以根據需要按摩數據(我假設q11代表「問題11」或其他這就是爲什麼你對所有這些輸入保持相同名稱的原因)。

+0

非常好的答案,並非常有幫助:) –

+0

_Doing這將允許來自這些輸入的所有選定的響應留在服務器端的q11字段_我已經嘗試這樣做,不幸的是它不是真實的。當你命名你的單選按鈕組'name =「q11 [proactivity]」'和'name =「q11 [service]」'時,它們在服務器端作爲單獨字段接收(而不是q11 []數組) – Krzysiek

1

它的工作原理請按照鏈接

http://jsfiddle.net/Cwalkdawg/3CxLD/2/ 

既然你堅持使用收音機,我將與jQuery庫去得到你的價值觀。你可以添加一個類到你的收音機,它將允許你選擇這個類並遍歷它。這是違反直覺和骯髒的,但它會起作用。此標記:

<input type="radio" class="rad" name="None" value="--" />None 
<br /> 
<input type="radio" class="rad" name="Item1" value="Item1" />Item1 
<br /> 
<input type="radio" class="rad" name="Item2" value="Item2" />Item2 
<br /> 
<input type="radio" class="rad" name="Item3" value="Item3" />Item3 
<br /> 
<input type="radio" class="rad" name="Item4" value="Item4" />Item4 
<br /> 

去與這個jQuery:

$(document).ready(function() { 
    $("#button").click(function() { 
     // Radios 
     $(".rad:checked").each(function() { 
      console.log("Radio: " + $(this).val()); 
     }); 
    }); 
}) 

在小提琴,我添加複選框也只是向你展示它是如何更容易,即下面的標記(讀取更加容易,而不是模棱兩可):

<input name="choices" type="checkbox" value="something1" />Option 1 
<br /> 
<input name="choices" type="checkbox" value="something2" />Option 2 
<br /> 
<input name="choices" type="checkbox" value="something3" />Option 3 
<br /> 
<input name="choices" type="checkbox" value="something4" />Option 4 
<br /> 

去與這個jQuery:

$("#button").click(function() { 
    //Check boxes 
    $("input:checkbox[name=choices]:checked").each(function() { 
     console.log("Checkbox: " + $(this).val()); 
    }); 
}); 

,除非你想用取消選擇所有的人都無法取消一個單選按鈕無論是復位元素,它會重置您的整個表單,或創建一個自定義函數(無論如何將清除所有選項)。

取消選區,可以傳送到你的名字=無單選按鈕用下面的代碼:

$(".rad[name=None]").click(function() { 
    $(".rad").removeAttr("checked"); 
}); 
0

你也可以把一個號碼(一個計數器,如果你用js)您的姓名陣列像這裏面:

積極性: <input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">

服務/支持: <input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">

提供
專家技能: <input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">