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

您可以使用jQuerys parent()和siblings()方法。

检查此jsFiddle Demo for radios！

jQuery Radio：

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

jQuery Checkboxes ：

$(".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 Checkboxes ：

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

<强> CSS ：

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

Answer 2

对于复选框，只需：

$(".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;
});

更多探索：

也就是说，使用真正的复选框和单选按钮通常是更好的方法，尤其是对移动设备（平板电脑，手机等）的支持。您可以使用label元素使其易于点击，并对其进行整体设置，但通过将它们设置为真实的复选框/单选按钮，您可以使用用户代理（浏览器）信息来处理通过滚动你自己而失败。

Answer 3

复选框的设计是用于那种方式和后者的单选按钮，乳清你想用锚点替换吗？如果你想主题你的元素有jQuery插件可以取代实际的复选框和单选按钮与漂亮的版本，请参阅此处http://stefangabos.ro/jquery/zebra-transform/

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>

使锚标记的行为类似于复选框和单选按钮

4 个答案: