Форум

sergeos · #1 (**permalink**) 14.07.2010, 16:35

Народ, я тока-тока вот стал изучать...
Помогите, а, решить один вопросик.
У меня еть такая штука:

<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label>

Суть в том, что человек заполняющий форму на сайте не прибегает к использованию мыши,
поэтому я бы хотел, чтобы по нажатию {TAB} когда фокус попадает на чекбокс, то эта строка с конкретным чекбокбоксом подсвечивалась бы, ну и естественно, подсветка снималась, после ухода табуляции.
Подсобите как и чем такое можно решить?

exec · #2 (**permalink**) 14.07.2010, 16:38

$(':checkbox').focus(function () {
$(this).next().addClass('класс');
}).blur(function () {
$(this).next().removeClass('класс');
});

sergeos · #3 (**permalink**) 14.07.2010, 17:01

exec,
но что-то не сработало...
добавил такой класс

#onbox {
            color: #FFCC00;
            }

никаких изменений,
на новичка не обессудьте..., что я не так делаю?

exec · #4 (**permalink**) 14.07.2010, 17:02

.onbox

B@rmaley.e><e · #5 (**permalink**) 14.07.2010, 17:07

Сообщение от sergeos

#onbox

Это не класс, это ID.

sergeos · #6 (**permalink**) 14.07.2010, 17:31

всё перепробвал, сейчас у меня так на странице:

<head>
    <style>
   .onbox {
            color: #FFCC00;
            }

    </style>
    </head>
    <body>...
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label>  

<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label>  

<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label> 
...
    </body>
    </script>
        $('.checkbox').focus(function () {  
        $(this).next().addClass('onbox');  
        }).blur(function () {  
        $(this).next().removeClass('onbox');  
        }); 
    </script>

e1f · #7 (**permalink**) 14.07.2010, 17:32

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some test</title>

    <style type="text/css">
    input:focus ~ label {
        color: #FFCC00;
    }
    </style>
    </head>

    <body>
        <p><input id="ch1" type="checkbox" name="1" value="1" /> <label for="ch1">One</label></p>
        <p><input id="ch2" type="checkbox" name="2" value="2" /> <label for="ch2">Two</label></p>
        <p><input id="ch3" type="checkbox" name="3" value="3" /> <label for="ch3">Three</label></p>
    </body>
</html>

exec · #8 (**permalink**) 14.07.2010, 17:37

Цитата:

$('.checkbox')

Незачем коверкать мой код, а потом говорить, что он не работает.

e1f, некроссбраузерно.

UPD: рабочий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
		</script>
		<style type="text/css">
			.onbox {
				color: red;
			}
		</style>
	</head>
	<body>
		<input type="checkbox" id="ch1" />
		<label for="ch1">
			Number one
		</label>
		<br />
		<input type="checkbox" id="ch2" />
		<label for="ch2">
			Number two
		</label>
		<br />
		<input type="checkbox" id="ch3" />
		<label for="ch3">
			Number three
		</label>
		<script type="text/javascript">
			$(':checkbox').focus(function () {
				$(this).next().addClass('onbox');
			}).blur(function () {
				$(this).next().removeClass('onbox');
			});
	</script>
	</body>
</html>

sergeos · #9 (**permalink**) 14.07.2010, 17:44

exec,
я ошибся, пардон, я чисто экспериментировал. у меня написано так:
$(':checkbox')
но всё равно не работает.

в примере e1f, у меня вообще вместо чекбоксов - инпутбоксы,
и тоже не работает подсветка...
может это чисто у меня в браузере такая проблема? у меня IE8

exec · #10 (**permalink**) 14.07.2010, 17:46

sergeos, посмотрите мой предыдущий пост, я добавил рабочий пример.

Форум

Справочник

Discord чат

Курсы javascript