powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / onClick и RadioButton
4 сообщений из 4, страница 1 из 1
onClick и RadioButton
    #38391315
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем доброго дня! Как известно, IE8 не поддерживает псевдокласс :checked Чтобы кроссбраузерно нарисовать красивый RadioButton, нужен JavaScript. Итак, у меня двойная задача:
- для каждого RadioButton менять картинку в зависимости от checked
- назначить дополнительный обработчик каждому RadioButon
Получилось только наполовину: http://jsbin.com/oNAg/3/edit
Уверен, решение несложное, только не соображу как :(
На всякий случай сам код без сервиса jsbin
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
<!DOCTYPE html>
<html>
<head>
<title>Custom RadioButton</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {
	margin:10px;
	font-family:Arial,sans-serif;
	font-size:10pt;
}
input[type="radio"] {
	margin-left:-9999px; /* IE8 не вызывает событие onclick при display:none; */
}
.divRadio {
	float:left;
	background-image:url('http://f3.s.qip.ru/GSrg7JUw.png');
	background-repeat:no-repeat;
	background-position:1px -199px;
	height:18px;
	width:18px;
}
</style>
<script>
function MyLoad() {
  CustomRadio('form1', 'radio1');
  CustomRadio('form2', 'radio2');
  document.getElementById('rb1').parentNode.style.backgroundPosition = '1px -219px';
  document.getElementById('rb4').parentNode.style.backgroundPosition = '1px -219px';
}

function Rad1Click() {
	var rad = document.forms['form1'].elements['radio1'];

	for (var i = 0; i < rad.length; i++) {
		if (rad[i].checked) {
			if (rad[i].id = 'rb1') {alert('Будут действия при щелчке на Апельсине');}
			if (rad[i].id = 'rb2') {alert('Будут действия при щелчке на Банане');}
		}				
	}
}

function Rad2Click() {
	var rad = document.forms['form2'].elements['radio2'];

	for (var i = 0; i < rad.length; i++) {
		if (rad[i].checked) {
			if (rad[i].id = 'rb3') {alert('Некие действия на Винограде');}
			if (rad[i].id = 'rb4') {alert('Некие действия на Груше');}
		}				
	}
}

function CustomRadio(FormName, RadioName) {
	var rad = document.forms[FormName].elements[RadioName];

	for (var i = 0; i < rad.length; i++) {
		rad[i].onclick = function() {
			for (var i = 0; i < rad.length; i++) {
				if (rad[i].checked) {
					rad[i].parentNode.style.backgroundPosition = '1px -219px';
				} else {
					rad[i].parentNode.style.backgroundPosition = '1px -199px';
				}
				if (FormName == 'form1') {Rad1Click()};
				if (FormName == 'form2') {Rad2Click()};
			}
		}
	}
}
</script>
</head>
<body onload="MyLoad();">
<form name="form1">
	<label><div class="divRadio"><input type="radio" name="radio1" id="rb1" checked></div>Апельсин</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio"><input type="radio" name="radio1" id="rb2"></div>Банан</label>
</form>
<br>
<form name="form2">
	<label><div class="divRadio"><input type="radio" name="radio2" id="rb3"></div>Виноград</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio"><input type="radio" name="radio2" id="rb4" checked></div>Груша</label>
</form>
</body>
</html>

...
Рейтинг: 0 / 0
onClick и RadioButton
    #38391437
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
user89 , ты сильно усложняешь...
Вот тебе пример
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/kastomnie-checkbox-i-radio-na-css.html

Все что тебе нужно - заменить псевдоклассы на некий класс, который ты будешь ставит/убирать у элементов при клике.
Ну и картинку поменять на свою...
...
Рейтинг: 0 / 0
onClick и RadioButton
    #38391844
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa,

ага, по ссылке есть пример для IE8. Спасибо!
...
Рейтинг: 0 / 0
onClick и RadioButton
    #38399323
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Забыл решение написать...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
<!DOCTYPE html>
<html>
<head>
<style>
body {
	margin:10px;
	font-family:Arial,sans-serif;
	font-size:10pt;
}
input[type="radio"] {
	margin-left:-9999px; /* IE8 не вызывает событие onclick при display:none; */
}
.divRadio {
	float:left;
	background-image:url('http://f3.s.qip.ru/GSrg7JUw.png');
	background-repeat:no-repeat;
	background-position:1px -199px;
	height:18px;
	width:18px;
}
</style>
<script>
function SetCheckOnLoad() {
	var elems = document.getElementsByTagName('input');
	for (i=0; i < elems.length; i++) {
		if (elems[i].type == 'radio') {
			if (elems[i].checked) {elems[i].parentNode.style.backgroundPosition = '1px -219px';} else {elems[i].parentNode.style.backgroundPosition = '1px -199px';}
		}
	}
}

function drawRadio(el) {
	var elems = document.getElementsByName(el.childNodes[0].name);
	for (i=0; i < elems.length; i++) {
		if (elems[i].checked) {elems[i].parentNode.style.backgroundPosition = '1px -219px';} else {elems[i].parentNode.style.backgroundPosition = '1px -199px';}
	}
}

function Step1(el) {drawRadio(el); alert('Действия № 1');}
function Step2(el) {drawRadio(el); alert('Действия два');}
function Step3(el) {drawRadio(el); alert('Действия номер 3');}
function Step4(el) {drawRadio(el); alert('Некие действия 4');}
function Step5(el) {drawRadio(el); alert('Действия № 5');}
function Step6(el) {drawRadio(el); alert('Действия 6');}
</script>
</head>

<body onload="document.forms['frm'].reset(); SetCheckOnLoad();">
<form name="frm">
	<label><div class="divRadio" onClick="Step1(this);"><input type="radio" name="RadioButton1" value="1234567890"></div>Апельсины</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio" onClick="Step2(this);"><input type="radio" name="RadioButton1" value="1234567890" checked></div>Бананы</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio" onClick="Step3(this);"><input type="radio" name="RadioButton1" value="1234567890"></div>Виноград</label>
	<hr>
	<label><div class="divRadio" onClick="Step4(this);"><input type="radio" name="RadioButton2" value="1234567890" checked></div>Картофель</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio" onClick="Step5(this);"><input type="radio" name="RadioButton2" value="1234567890"></div>Морковь</label>
	<div style="clear:both;"></div>
	<label><div class="divRadio" onClick="Step6(this);"><input type="radio" name="RadioButton2" value="1234567890"></div>Репа</label>
</form>
</body>
</html>

...
Рейтинг: 0 / 0
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / onClick и RadioButton
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]