Установите или снимите флажок jquery в переключателе для разных <li>

0

привет всем, кто я проектирую страницу для панели регистрации здесь, на этой странице. Я использую радиокнопку с ярлыком в разных разных li с разным значением. мой дизайн

<div class="usertype">
    <ul>
        <li id="bathroomslct"><label>Bathrooms:</label>
            <input type="radio" name="Bathrooms" value="1" id="Bathrooms1" /><label class="new-label" for="Bathrooms1">1</label>
            <input type="radio" name="Bathrooms" value="2" id="Bathrooms2" /><label class="new-label" for="Bathrooms2">2</label>
            <input type="radio" name="Bathrooms" value="3" id="Bathrooms3" /><label class="new-label" for="Bathrooms3">3</label>
            <input type="radio" name="Bathrooms" value="4" id="Bathrooms4" /><label class="new-label" for="Bathrooms4">4</label>
        </li>
        <li> <label>Furnished</label>
            <input type="radio" name="Furnished" value="Unfurnished" id="Unfurnished" /><label class="new-label" for="Unfurnished">Unfurnished</label>
            <input type="radio" name="Furnished" value="Semifurnished" id="Semifurnished" /><label class="new-label" for="Semifurnished">Semifurnished</label>
            <input type="radio" name="Furnished" value="Furnished" id="Furnished" /><label class="new-label" for="Furnished">Furnished</label>
        </li>

    </ul>
</div>

здесь я использую этот скрипт для выбора переключателя

    <script>
    $(window).load(function(){
    $(".usertype ul li#bathroomslct label.new-label label").click(function () {
        $(".usertype ul li#bathroomslct label.new-label label").not(this).removeClass("selected").addClass('unselected')
        $(this).toggleClass("unselected").toggleClass("selected");
    });
    });
</script>

так как я исправляю свою проблему, не выбранную для разных ли...

  • 0
    Что ты пытаешься сделать
  • 0
    Можете ли вы объяснить, что вы пытаетесь сделать с jsfiddle.net/arunpjohny/dGzG9/1
Показать ещё 3 комментария
Теги:

3 ответа

1

Вот рабочий пример: DEMO

$(document).ready(function () {
    $(".usertype li .new-label, .usertype li input").click(function (e) {
        console.log(e.target.tagName);
        if (e.target.tagName === "INPUT") {
            $(this).next("label").addClass("selected").removeClass("unselected")
            .siblings(".new-label").addClass("unselected").removeClass("selected");
        }
    });
});

Поскольку вы используете атрибут for="..." на своих ярлыках, событие click срабатывает дважды, когда вы нажимаете метку. Вам нужно поймать только input клики.

Вы также можете добавить selected и unselected классы в свои элементы с самого начала.

РЕДАКТИРОВАТЬ
Просто заметили, что вы хотите изменить цвет фона, поэтому я обновил его в демоверсии

Поделиться
  • 0
    это не работает на моей странице
  • 0
    Это, вероятно, потому что у вас есть $(window).load а у меня есть $(document).ready
0

пытаться

jQuery(function ($) {
    $('.usertype li input[type="radio"]').change(function () {
        var $next = $(this).next().removeClass('unselected').addClass('selected');
        $(this).siblings('.new-label').not($next).removeClass('selected').addClass('unselected');
    });
});

Демо: скрипка

Поделиться
  • 0
    здесь без мебели, полуобработанный цвет не изменился я хочу изменить цвет обоих
  • 0
    @ user2930603 смотрите обновление
Показать ещё 11 комментариев
0

Если я правильно вас понимаю, ваш селектор jQuery ошибочен. + Изменить

$(".usertype ul li#bathroomslct label.new-label label")

В

$(".usertype ul li#bathroomslct label.new-label")
Поделиться
  • 0
    это не работает..
  • 0
    Это должно работать . Убедитесь, что вы включили JQuery перед этим сценарием. Еще одно замечание: в вашей версии это работает только при нажатии на ярлык (а не на переключатель).

Ещё вопросы

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