Как выбирать radio по клику на картинку?
Доброго всем дня.
Суть: хочу, чтобы элемент radio выбирался не только по клику на "кружочке", но и по клику на картинке, которая относится к данному элементу. Имеется следующий код: <input type="radio" name="radioname" value="radio1"> <img src="radio1img.png" alt="radio1" id="radio1img" onclick="imgClick()" /> <input type="radio" name="radioname" value="radio2"> <img src="radio2img.png" alt="radio2" id="radio2img" onclick="imgClick()" /> <input type="radio" name="radioname" value="radio3"> <img src="radio3img.png" alt="radio3" id="radio3img" onclick="imgClick()" /> Вариант 1:
function imgClick() {
if (document.getElementById("radio1img").onclick) {
document.getElementsByName("radioname")[0].checked = true;
document.getElementsByName("radioname")[1].checked = false;
document.getElementsByName("radioname")[2].checked = false;
}
else if (document.getElementById("radio2img").onclick) {
document.getElementsByName("radioname")[1].checked = true;
document.getElementsByName("radioname")[0].checked = false;
document.getElementsByName("radioname")[2].checked = false;
}
else if (document.getElementById("radio3img").onclick) {
document.getElementsByName("radioname")[2].checked = true;
document.getElementsByName("radioname")[1].checked = false;
document.getElementsByName("radioname")[0].checked = false;
}
}
Также пробовал jQuery:
function imgClick() {
$('#radio1img').click(document.getElementsByName("radioname")[0].checked = true);
$('#radio2img').click(document.getElementsByName("radioname")[1].checked = true);
$('#radio3img').click(document.getElementsByName("radioname")[2].checked = true);
}
В обоих вариантах всегда выбирается только первый radio. Не важно, на какую картинку я кликаю, всегда выбирается только первый. Почему так? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function imgClick() {
alert('Ok');
};
</script>
</head>
<body>
<label>
<input type="radio" name="radioname" value="radio1">
<img src="radio1img.png" alt="radio1" id="radio1img" onclick="imgClick()" />
</label>
<label>
<input type="radio" name="radioname" value="radio2">
<img src="radio2img.png" alt="radio2" id="radio2img" onclick="imgClick()" />
</label>
<label>
<input type="radio" name="radioname" value="radio3">
<img src="radio3img.png" alt="radio3" id="radio3img" onclick="imgClick()" />
</label>
</body>
</html>
|
Получилось, спасибо огромное!
|
| Часовой пояс GMT +3, время: 04:48. |