ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / onClick и RadioButton
4 сообщений из 4, страница 1 из 1
onClick и RadioButton
    #38391315
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
09.09.2013, 17:21
| Ответить | Цитировать | Написать  
onClick и RadioButton
    #38391437
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89 , ты сильно усложняешь...
Вот тебе пример
http://www.xiper.net/collect/html-and-css-tricks/verstka-form/kastomnie-checkbox-i-radio-na-css.html

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

ага, по ссылке есть пример для IE8. Спасибо!
...
Рейтинг: 0 / 0
10.09.2013, 10:51
| Ответить | Цитировать | Написать  
onClick и RadioButton
    #38399323
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
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
17.09.2013, 19:27
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / onClick и RadioButton
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38391437&tid=1447882]:
 0ms
get settings:
 8ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 171ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 236ms
total:  508ms
созд. / загр.: 508ms
x
x
Закрыть


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