Make ведут себя как флажки и переключатели

Question

У меня есть неупорядоченный список, как:

<ul class="list-one"> 
    <li><a href="#">Hip Hop</a></li> 
    <li><a href="#">Country</a></li> 
    <li><a href="#">Pop</a></li> 
    <li class="selected"><a href="#">Religious</a></li> 
    </ul> 

Я хочу якоря, чтобы вести себя как флажки. У меня есть другой подобный список, и я хочу, чтобы флажки там работали, как переключатели.

Есть ли способ сделать это с помощью jquery? Я искал google, но ничего не смог найти.

Answer 1

Для галочки, просто:

$(".list-one > li > a").click(function() { 
    $(this).closest('li').toggleClass('selected'); 
    return false; 
}); 

Или с помощью делегации:

$(".list-one").on("click", "> li > a", function() { 
    $(this).closest('li').toggleClass('selected'); 
    return false; 
}); 

Для радио кнопок, можно добавить, а не переключаясь и удалить класс из братьев и сестер:

$(".list-one > li > a").click(function() { 
    $(this).closest('li').addClass('selected').siblings().removeClass('selected'); 
    return false; 
}); 

Или с использованием делегирования:

$(".list-one").on("click", "> li > a", function() { 
    $(this).closest('li').addClass('selected').siblings().removeClass('selected'); 
    return false; 
}); 

Подробнее изучить:

• $/jQuery
• on
• closest
• toggleClass
• siblings
• addClass
• removeClass

---

Тем не менее, с помощью реального Флажки и радио кнопки часто является лучшим способом пойти, не в последнюю очередь для поддержки мобильных устройств (планшетов, телефонов и т.д.). Вы можете использовать элементы label, чтобы их легко нажимать и тщательно их стилизовать, но, сделав их действительными флажками/переключателями, вы предоставляете информацию агента пользователя (браузера) для работы с тем, что вы теряете, ,

Answer 2

checkbox's были спроектированы таким образом, чтобы использовать их таким образом и переключатели в последнем, сыворотка, которую вы хотите заменить якорями? если вы хотите, чтобы ваши темы элементов есть JQuery плагинов, которые могут заменить фактические флажки и радиокнопки с prettyfied версий смотрите здесь http://stefangabos.ro/jquery/zebra-transform/

Answer 3

Вы можете работать с jQuerys parent() и siblings() методов.

проверьте это jsFiddle Demo for radios!

JQuery Радио:

$(".list-one a").click(function(){ 
    $(this).parent().addClass("selected").siblings().removeClass("selected"); 
}); 

JQuery Флажки:

$(".list-one a").click(function(){ 
    $(this).parent().toggleClass('selected'); 
}); 

Если вам нужны радио для формы, вы можете использовать label вместо a тега и скрыть радио с css.

проверьте это jsFiddle Demo for radios!

HTML Радио:

<ul class="list-one"> 
    <li> 
    <input id="input-1" type="radio" name="list" value="Hip Hop" /> 
    <label for="input-1">Hip Hop</label> 
    </li> 
    <li> 
    <input id="input-2" type="radio" name="list" value="Country" /> 
    <label for="input-2">Country</label> 
    </li> 
    <li> 
    <input id="input-3" type="radio" name="list" value="Pop" /> 
    <label for="input-3">Pop</label> 
    </li> 
    <li class="selected"> 
    <input id="input-4" type="radio" name="list" value="Pop" /> 
    <label for="input-4">Religious</label> 
    </li> 
</ul> 

Не забудьте изменить атрибут type в checkbox для флажков.

JQuery Радиоприемники:

$(".list-one label").click(function(){ 
    $(this).parent().addClass("selected").siblings().removeClass("selected"); 
}); 

JQuery Флажки:

$(".list-one label").click(function(){ 
    $(this).parent().toggleClass('selected'); 
}); 

CSS:

.list-one label { cursor: pointer; } 
.list-one input { display: none; } 

Answer 4

Изменить свой код :

<ul class="list-one"> 
    <li><input type="checkbox" name="music" value="HipHop">Hip hop</li> 
    <li><input type="checkbox" name="music" value="Country">Country=</li> 
    <li><input type="checkbox" name="music" value="Pop">Pop</li> 
    <li><input type="checkbox" name="music" value="Religious">Religious</li> 
    </ul>