Javascript, чтобы добавить класс CSS на этикетке

0

Мой html выглядит так:

<table class="ListCheck">
<tbody>
<tr>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$0" class="location" id="MainContent_List_0" type="checkbox">
    <label for="MainContent_List_0">test</label></span>
</td>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$1" class="location" id="MainContent_List_1" type="checkbox">
    <label for="MainContent_List_1">test</label></span>
</td>
<td>
<span class="listitem">
    <input name="ctl00$MainContent$List$2" class="location" id="MainContent_List_2" type="checkbox">
    <label for="MainContent_List_2">test</label></span>
</td>
</tr>
</tbody>
</table>

Я пытаюсь добавить javascript, чтобы добавить класс на ярлыке, чтобы применить некоторый css при выборе флажка

мой сценарий:

<script type='text/javascript'>
        $('.listitem').each(function () {
            $(this).children("input").addClass("location");
            if ($(this).children("input").is(":checked"))
            {
                $(this).children('label').addClass("checked");
            } else {
                $(this).children('label').removeClass("checked");
            }
        });
</script>

Но по какой-то причине он не добавляет класс на метку во время выполнения. Посмотрите мой код и дайте мне знать, чего я не вижу. ТИА.

  • 0
    это jquery yo, нет необходимости смешивать чистый js, и что вы подразумеваете под временем выполнения, вы имеете в виду, когда вы на самом деле идете и проверяете что-то или у вас что-то предварительно проверяется при загрузке страницы? вам понадобится некоторая обработка событий для первого.
  • 1
    Вам не хватает закрывающих тегов для тега span и input. Пожалуйста, убедитесь, что его нет в реальном коде.
Показать ещё 2 комментария
Теги:

4 ответа

4

Вы можете использовать метод next() для доступа к соответствующему <label> следующим образом:

$('input[type="checkbox"]').click(function () {
     $(this).next().toggleClass("checked");
});

Рабочая скрипка

  • 0
    Мне нужно добавить класс CSS только на метку, а не в поле ввода
  • 0
    @svg это добавляет к ярлыку. проверь скрипку
1

Попробуйте использовать свой код с помощью

    $( ".target" ).change(function() {
      alert( "Handler for .change() called." );
    });

так

<script type='text/javascript'>
        $('.listitem').each(function () {
            $(this).children("input").addClass("location");

            $(this).children("input").change(function() {

            if ($(this).children("input").is(":checked"))
            {
                $(this).children('label').addClass("checked");
            } else {
                $(this).children('label').removeClass("checked");
            }
          });// missing bracket ;)
        });
</script>
0

Я немного изменил свой код, это было неправильно, если я понял вас правильно.

   $('.location').click(function() {
                if ($(this).is(":checked"))
                {
                     console.log('added');
                    $(this).closest('label').addClass("checked");
                } else {
                    console.log('removed');
                    $(this).closest('label').removeClass("checked");
                }
    });

http://jsfiddle.net/W7nr4/

0

Ваш код javascript должен выглядеть так:

    $('.listitem').click(function () {
        $(this).children("input").addClass("location");
        if ($(this).children("input").is(":checked"))
        {
            $(this).children('label').addClass("checked");
        } else {
            $(this).children('label').removeClass("checked");
        }
    });

клик применяется ко всем элементам, найденным селектором.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню