43
Làm cách nào để gọi onclick trên danh sách radio bằng javascript?Gọi onclick trên danh sách radio bằng cách sử dụng javascript
A
Trả lời
33
Bạn tạo danh sách nút radio như thế nào? Nếu bạn chỉ sử dụng HTML:
<input type="radio" onclick="alert('hello');"/>
Nếu bạn tạo những thông tin này thông qua ASP.NET, bạn có thể thêm thuộc tính đó cho từng thành phần trong danh sách. Bạn có thể chạy sau khi bạn phổ biến danh sách, hoặc nội tuyến nó nếu bạn xây dựng danh sách của bạn một-by-one:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
Thông tin thêm: http://www.w3schools.com/jsref/event_onclick.asp
15
Tôi đồng ý với @annakata rằng câu hỏi này cần một số làm rõ hơn, nhưng đây là một ví dụ rất, rất cơ bản của làm thế nào để thiết lập một handler onclick sự kiện cho nút radio:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
</script>
</head>
<body>
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
</body>
</html>
7
vấn đề ở đây là việc vẽ của một RadioButtonList kết thúc tốt đẹp các nút radio cá nhân (ListItems) trong thẻ span và e ven khi bạn gán một trình xử lý sự kiện phía máy khách vào danh sách trực tiếp bằng cách sử dụng các thuộc tính mà nó gán sự kiện cho span. Gán sự kiện cho RadioButtonList gán nó cho bảng mà nó hiển thị.
Bí quyết ở đây là thêm ListItems trên trang aspx chứ không phải từ mã phía sau. Sau đó, bạn có thể gán hàm JavaScript cho thuộc tính onClick. Bài đăng trên blog này; attaching client-side event handler to radio button list by Juri Strumpflohner giải thích tất cả.
Điều này chỉ hoạt động nếu bạn biết trước ListItems và không giúp các mục trong RadioButtonList cần được thêm động bằng cách sử dụng mã phía sau.
+1
Để làm mọi thứ tồi tệ hơn, onClick cũng không xuất hiện trong Intellisense. Cảm ơn, điều này đã giúp. – Narayana
21
Để kích hoạt các sự kiện onClick trên một đài phát thanh-nút gọi phương thức click() trên phần tử DOM:
document.getElementById("radioButton").click()
sử dụng jquery:
$("#radioButton").click()
AngularJs:
angular.element('#radioButton').trigger('click')
+1
Tuy nhiên có một điều với .click(): Nếu bạn thay đổi giá trị đã chọn của một đài với javascript như thế này, sự kiện 'thay đổi' không kích hoạt trong IE (tôi đã thử IE8) – Michiel
+0
@Michiel cảm ơn rất nhiều, nhận xét đó giải quyết được một vấn đề rất khó khăn đối với tôi! Đã đăng câu hỏi/câu trả lời về nó - http://stackoverflow.com/a/13827249/66372 ps. hành vi cũng có mặt trong chrome – eglasius
0
thử giải pháp sau
HTML:
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
JS:
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
Đừng bạn có nghĩa là foreach (ListItem RadioButton trong RadioButtons.Items)? – Fandango68