0

我有一个无序列表，例如：

  <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 来做到这一点？我搜索了谷歌，但真的找不到任何东西。

4

4 回答 4

4

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

检查这个jsFiddle Demo 的收音机！

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 的收音机！

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; }
于 2013-08-07T14:21:12.123 回答
3

对于复选框，只需：

$(".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元素使它们易于单击，并彻底设置它们的样式，但是通过使它们成为真正的复选框/单选按钮，您可以为用户代理（浏览器）提供可以使用的信息，而您自己却失去了这些信息。

于 2013-08-07T14:21:03.117 回答
0

将您的代码更改为：

<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>
于 2013-08-07T14:28:00.207 回答
0

复选框旨在以这种方式使用，而单选按钮则用于后者，您想用锚点替换吗？如果你想为你的元素设置主题，有 jQuery 插件可以用漂亮的版本替换实际的复选框和单选按钮，请参见这里http://stefangabos.ro/jquery/zebra-transform/

于 2013-08-07T14:21:09.587 回答