2012-06-05 40 views
8

Tôi muốn kiểm tra nhiều nút radio, tất cả các nút radio có cùng tên nhưng các id khác nhau.Cách kiểm tra nhiều nút radio, nút radio có cùng tên?

Đây là mã html của tôi,

<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

Bạn ** không thể ** có nhiều thành phần có cùng ID, tất cả các ID phải là duy nhất. Tất cả các 'id =" qq [] "' và 'id =" qqa [] "' cần được thay đổi. –

+0

Chưa kể các nhãn trỏ đến cùng một phần tử. –

Trả lời

12

Bạn không thể. Các nút radio có sẵn cho một sự lựa chọn duy nhất . Đối với nhiều lựa chọn, bạn cần hộp kiểm.

+0

Tôi sử dụng hộp kiểm nhưng khi tôi nhấp vào "Tốt", bạn nên bỏ chọn "Kém" – Symfony

+0

Sau đó, sử dụng hộp radio và mỗi "nhóm hộp radio" cần có cùng tên duy nhất. Một nhóm các hộp radio khác cần phải có một tên khác. –

+0

nhưng khi tôi cần cùng một tên để chèn các giá trị trong cơ sở dữ liệu – Symfony

2

Sử dụng nút radio để chọn nhiều mục có vẻ như trái với quy tắc khả năng sử dụng. Nếu bạn làm thế, bạn có thể cung cấp tên khác cho họ.

PS: bạn nên cung cấp biểu định kiểu bên ngoài cho mọi nút radio. Sẽ rất tuyệt nếu bạn muốn điều chỉnh sau.

3

Khi bạn sử dụng cùng một tên cho tất cả đầu vào radio, tất cả đều thuộc một nhóm. Nó sẽ không cho phép bạn thực hiện các hành động riêng biệt.

Bạn phải sử dụng tên gọi khác nhau đối với từng nhóm thanh

7

Bọc nút radio của bạn trong thẻ biểu mẫu sẽ cho phép nhóm các nút radio có cùng tên để hoạt động độc lập với nhau.

http://jsfiddle.net/8qB56/

Nhưng nhìn vào những gì bạn đang cố gắng để làm, nó là thích hợp hơn để bạn có thể thay đổi tên đầu vào của mỗi câu hỏi hợp lý, kể từ khi bạn đang làm việc với những gì trông giống như một hình thức duy nhất.

Vì vậy, có lẽ bạn có thể thay đổi name="q11[]" thành name="q11[proactivity]" cho mục nhập câu hỏi chủ động, name="q11[service]" cho mục nhập câu hỏi dịch vụ và name="q11[provision]" cho đầu vào câu hỏi cung cấp.

Thực hiện việc này sẽ cho phép tất cả các phản hồi được chọn từ các đầu vào này nằm trong trường q11 ở phía máy chủ, sau đó bạn có thể xoa bóp dữ liệu theo ý muốn (tôi giả định q11 là viết tắt của câu hỏi 11) đó là lý do tại sao bạn rất nhấn mạnh vào việc giữ cùng tên cho tất cả các yếu tố đầu vào này).

+0

Câu trả lời rất hay và rất hữu ích :) –

+0

_Thực hiện việc này sẽ cho phép tất cả các câu trả lời được chọn từ các đầu vào này nằm trong trường q11 ở phía máy chủ_ Tôi đã thử làm như vậy và không may là KHÔNG đúng. Khi bạn đặt tên cho các nhóm nút radio của bạn 'name =" q11 [proactivity] "' và 'name =" q11 [service] "' chúng được nhận dưới dạng các trường riêng biệt ở phía máy chủ (không phải là mảng q11 []) – Krzysiek

1

Nó hoạt động pls theo liên kết

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

Vì bạn khăng khăng sử dụng radio, tôi sẽ đi với một thư viện jQuery để có được giá trị của bạn. Bạn có thể thêm một lớp vào radio của bạn và nó sẽ cho phép bạn chọn lớp đó và lặp qua nó. Nó phản trực giác và bẩn thỉu, nhưng nó sẽ hoạt động. đánh dấu này:

<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 /> 

Goes với jQuery này:

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

Trong fiddle, tôi đã thêm hộp kiểm quá, chỉ để cho bạn thấy nó là bao nhiêu dễ dàng hơn ví dụ:đánh dấu sau (mà đọc dễ dàng hơn và không phải là mơ hồ):

<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 /> 

Goes với jQuery này:

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

Bạn không thể bỏ chọn một nút radio trừ khi bạn muốn bỏ chọn tất cả trong số họ sử dụng hoặc một yếu tố thiết lập lại, mà sẽ thiết lập lại toàn bộ hình thức của bạn, hoặc tạo ra một chức năng tùy chỉnh chỉ dành cho radio (mà sẽ xóa tất cả các lựa chọn anyway).

Các Deselect có thể được chuyển đến name = nút radio Không bạn với đoạn mã sau:

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

Bạn cũng có thể đặt một số (một bộ đếm nếu bạn sử dụng js) bên trong của bạn tên mảng như thế này:

Tñnh nùng àöång: <input type="radio" name="myradio[0]"><input type="radio" name="myradio[0]">

Dịch vụ/hỗ trợ: <input type="radio" name="myradio[1]"><input type="radio" name="myradio[1]">

Cung cấp
kỹ năng chuyên môn: <input type="radio" name="myradio[2]"><input type="radio" name="myradio[2]">