Форум

Avron2 · #1 (**permalink**) 25.03.2011, 01:01

Галочку в чекбоксе можно поставить мышкой, а может ее поставить наш скрипт, допустим на нажатие текста "Выделить все".

Как написать скрипт именно на любое изменение состояние чекбокса. Будь то щелчек мыши или мой скрипт ее туда поставил.

Когда пользователь ставит галочку в чекбоксе На событие

$('chekbox11').change(function() ...)

у меня соотвествующая строчка таблицы меняет цвет

if ($('.cbTheme#'+id).attr('checked'))    {
            $(el).addClass('temp');
        } 
        else    {
            $(el).removeClass('temp');
        }

Когда пользователь нажимает текст "Выделить все" должен выполниться тот же вышеизложенный код. Но он не выполняется. Мне приходится писать тот же обработчик события для клика на тексте. Но ведь при клике на тексте, происходит событие изменения состояния chekbox, но вышеизложенный код не выполняется.
Как с этим бороться?

lalala · #2 (**permalink**) 25.03.2011, 11:14

<html>
	<head>
		<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'>
		</script>
		<style type="text/css">
		.style1{
			background:yellow;
		}
		</style>
	</head>
	<body>
	<div>
	<span  name="change">
		выделить все
	</span><br>
	<input type="checkbox" name="change"/>
	<br><br>
	<span id="text">
		лалалалалалалалалала
	</span>
	<div>
	<script type='text/javascript'>
		$('[name="change"]').click(function(){
			if ($(this).get(0).tagName !="INPUT") {
				var status=$('input[name="change"]').attr('checked');
				$('input[name="change"]').attr('checked',!status);
			};
			$("#text").toggleClass('style1');
		});
	</script>
	</body>
</html>

рони · #3 (**permalink**) 25.03.2011, 12:40

lalala,
Использовать одинаковое имя а тем более для span некорректно ...
и 21 строка должен быть закрывающий тег
Вариант через одинаковый class ...

<html>
	<head>
		<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'>
		</script>
		<style type="text/css">
		.style1{
			background:yellow;
		}
		</style>
	</head>
	<body>
	<div>
	<span  class="change" >
		выделить все
	</span><br>
	<input type="checkbox"  class="change" />
	<br><br>
	<span id="text">
		лалалалалалалалалала
	</span>
	</div>
	<script type='text/javascript'>
		$('.change').click(function(){
		    $("#text").toggleClass('style1');
            $('.change:input').attr('checked',$("#text").hasClass('style1'));
		});
	</script>
	</body>
</html>

lalala · #4 (**permalink**) 25.03.2011, 12:46

рони,
идея же правильная? а почему не корректно использовать одинаковые имена?
$('.change:input').attr('checked',$("#text").hasCl ass('style1')); а можно поподробнее, тут проверка на наличие стиля и возврат false или true?

рони · #5 (**permalink**) 25.03.2011, 13:12

lalala,
1.Атрибут name не входит в число стандартно поддерживаемых атрибутов тега span
2.Да

рони · #6 (**permalink**) 25.03.2011, 13:19

lalala,
P.S. без !DOCTYPE ваш пример в Internet Explorer для span не сработает.

lalala · #7 (**permalink**) 25.03.2011, 13:47

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

1.Атрибут name не входит в число стандартно поддерживаемых атрибутов тега span

не знал

рони, спасибо за объяснение

Avron2 · #8 (**permalink**) 25.03.2011, 14:40

Вы не правильно поняли мой вопрос.
Я пишу обработчик события на изменение чекбокса

$('.cbTheme').change(function()  {
        var id =$(this).attr('id'); 
        select_color_tr(id); /*Красим соответствующую. строку таблицы*/
    });

Есть у меня ссылочка "Выделить все". В обработчике щелчка мыши на ней, ставятся все галочки. Почему соотвествующие строчки не окрашиваются? Получается событие

('.cbTheme').change(function()

наступает только если изменение сделано мышкой, а если я установил галочки своим скриптом, то событие не срабатывает? Получается, что мне нужно вызывать скрипт окраски строк и при щелчке на чекбоксе, и на "Выделить все". А я хочу при щелчке на выделить все, только поставить галочки, а чтобы на это событие происходила окраска соотвествующих строкы. Как сделать чтобы любое изменение галочки вызывало скрипт.

рони · #9 (**permalink**) 25.03.2011, 15:26

Avron2,
Так? )))

<html>
	<head>
		<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'>
		</script>
		<style type="text/css">
		.style1{
			background:yellow;
		}
		</style>
	</head>
	<body>
	<div>
	<span>
		выделить все /
	</span><span>
		отменить все
	</span><br>
	<input type="checkbox"  class="change" id="n1"/>
	<br><br>
	<span id="text_n1">
		лалалалалалалалалала
	</span>
    <br />
    <input type="checkbox"  class="change" id="n2"/>
	<br><br>
	<span id="text_n2">
		лалалалалалалалалала
	</span>
    <br>

    </div>
	<script type='text/javascript'>
$('.change:input').change(function () {
    var id = "#text_" + $(this).attr('id')
    $(this).attr('checked') ? $(id).addClass('style1') : $(id).removeClass('style1');

});

$('span').click(function () {
    $('.change:input').attr('checked', !$(this).index()).change()
})
	</script>
	</body>
</html>

Avron2 · #10 (**permalink**) 25.03.2011, 15:34

Спасибо. Жаль, но поставив галочку программно, мы автоматом не вызовем событие change() этой галочки не явно. Так ведь?

Форум

Справочник

Discord чат

Курсы javascript