製作錨標記表現得像複選框和單選按鈕

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來做到這一點？我搜索谷歌，但無法找到任何東西。

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

複選框的設計是用於那種方式和後者的單選按鈕，乳清你想用錨代替嗎？如果你想你的主題元素有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

更改您的鱈魚e到：

<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>