При клике на чекбокс — выделение элемента списка?

Question

[nickostyle]

Привет всем, я только учусь и возможно вопрос глупый) не обессудьте, в гугле не нашел ничего конкретного.



Задача такая. Есть список с чекбоксами:

<ul>
<li>
<label class="blog-label"><input type="checkbox" name="blog_id[]" value="{$iBlogId}" class="input-checkbox" /> {$blog.name}</label>
</li>
</ul>

Не подскажете плагин jquery или код на js, чтобы при клике на чекбокс выделялся весь li? Т.е. присваивался ему класс checked, к примеру.



дополнение: при повторном клике класс нужно снимать.



Буду искренне признателен!

Answer 1

[Vitaliy Petrychuk]

$(function() {
  $('.input-checkbox').click(function() {
    $(this).closest('li').toggleClass('checked');
  });
})

Comments

[izelenyuk]

точно! :)

[nickostyle]

ваше заработало!)) В любом случае спасибо всем!

[Николай Васильчук]

Клик? На чекбоксе? Лучше так:

$(function() {
  $('.input-checkbox').on('change', function() {
    $(this).closest('li').toggleClass('checked');
  });
})

Answer 2

[izelenyuk]

Обычно наоборот стараются по клику на контейнер отмечать checkbox, так юзабельнее и правильнее.
Тем не менее, в качестве примера

$("input.input-checkbox").click(function(){ 
    $(this).parent("li").addClass("checked");
},function(){
    $(this).parent("li"). removeClass("checked");
});

Не проверял, но должно работать.

Comments

[nickostyle]

Как то не работает. МОжет что то не так делаю.

[Vitaliy Petrychuk]

Используйте 'parents' вместо 'parent'

[izelenyuk]

Упс, прошу прощения, сказывается недосып. Так и не будет работать. Вот такой вариант:

$("input.input-checkbox").click(function(){
    var par = $(this).parent("li");
    if (par.hasClass("checked"))
        par.removeClass("checked");
    else
        par.addClass("checked");
});

[nickostyle]

vermilion1, все равно не пашет. Элементу списка не присваивается класс checked почему то.

[nickostyle]

я извиняюсь, скрипт размещать ДО или ПОСЛЕ списка? :) хотя я как не размещаю, эффекта ноль почему то.

[izelenyuk]

Я надеюсь код приведенный выше для jquery размещается внутри секции <script type="text/javascript">...</script>?

[nickostyle]

Разумеется ))

Answer 3

[xmoonlight]

Зачем?! задача то какая?
присвойте в input type=hidden value=«текст нужного пункта» из списка и все.

Comments

[xmoonlight]

Этот коммент — верен!
Я не понял вначале)

Answer 4

[transpond]

На чистом JS (если на проекте не используется jQuery, то подключать его ради этой задачи смысла нет):

<ul> <li> <label class="blog-label"><input type="checkbox" name="blog_id[]" value="{$iBlogId}" class="input-checkbox" onclick="this.parentNode.className += ' checked'"/> {$blog.name}</label> </li> </ul> 

Comments

[transpond]

Код выше присвоит класс checked элементу label, чтобы класс добавить элементу li — брать родителя родителя:

<ul> <li> <label class="blog-label"><input type="checkbox" name="blog_id[]" value="{$iBlogId}" class="input-checkbox" onclick="this.parentNode.parentNode.className += ' checked'"/> {$blog.name}</label> </li> </ul> 

[nickostyle]

Работает, но при повтороном нажатии класс не снимается. Боюсь, я забыл сказать об этом в вопросе. Кстати, джикери подключен.

Answer 5

[Graube]

Все это можно сделать с помощью псевдокласса :checked. Недавно, как раз, была статья, можете почитать её, там все элементарно просто. А вот здесь, найдешь, как раз, то, что ищешь.