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

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

  <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有什么方法可以做到这一点吗？我搜索了谷歌，但没有找到任何东西。

对于复选框，只需：

$(".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").on("click", "> li > a", function() {
    $(this).closest('li').addClass('selected').siblings().removeClass('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').toggleClass('selected');
    return false;
});

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

更多信息可供探索：

---

也就是说，使用真正的复选框和单选按钮通常是更好的方式，尤其是对于支持移动设备平板电脑、手机等。。您可以使用标签元素使其易于单击，并对其进行彻底的样式设置，但通过使其成为真正的复选框/单选按钮，您可以为用户代理浏览器提供您自己滚动时丢失的信息，你想用锚代替乳清吗？如果您想对元素进行主题化，可以使用jQuery插件将实际的复选框和单选按钮替换为经过预处理的版本。请参见此处

您可以使用jQuery的父方法和同级方法

检查这个

jQuery收音机：

jQuery复选框：

若您需要表单的收音机，您可以使用标签而不是标记，并使用css隐藏收音机

检查这个

HTML收音机：

jQuery复选框：

CSS:

将代码更改为：

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

---

为什么不让复选框和单选按钮像锚一样工作呢？那容易多了。是的，你能做到。但至少尝试一下，在这里展示一下。我们可以指导你。你说的像复选框一样是什么意思？你想在点击链接时切换颜色或以其他方式直观地指示某种开/关状态吗？只是出于好奇，为什么不能使用复选框和单选按钮？我只是想弄明白，当浏览器提供了完美的标签时，为什么你需要伪造一些东西…@AlexZahir的行为就像复选框一样是非常模糊的。是否要显示复选标记？是否要在页面上切换某些内容？是否仍要链接到其他页面？如果你不知道，问谁写过这个设计来澄清。

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

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

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

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