js/jquery模拟radio单选效果_radio 模拟鼠标选中-优快云博客

如题。

现在我们已经不满足于仅仅使用原生单选按钮了。

我们当然希望让自己的样式别出一格，可以随意修改其样式。

实现样式的话，使用ul/li进行配合是最好的。因为我们可以通过jquery很方便地获取到ul中li的个数。

思路就是：

1.给每一个li赋予一个序列化的编号。

2.通过jquery.$("ul>li").length获取到ul中li的个数，选中的onclick函数传入选中的li或者li中元素的ID序列号。

3.遍历每个li。将li的样式变为非选中的状态。然后将选中的元素置为选中的样式。或者，在循环中对ID进行判断。将非选中的元素置为非选中，而选中的元素则置为选中的样式。

4.操作的方法是，准备两个样式，一个是非选中状态，一个是选中状态。然后交替更改元素的类名修改其样式。

其中需要解决的小问题是：

1.使用if语句进行判断的时候，传过来的ID是一个string类型的值。我们需要使用parseInt()将其转换为INT类型的元素才可以和循环中的i进行判断。

2.修改classname可以使用原生的js语句element.className = "new classname"来修改，如果是要通过对某一个元素的某一个css样式进行修改，可以使用jquery.$(element).css("attr","value");直接操作。当然可以使用element.style.attr = "new value"来修改，但是这种方法始终没有jquery来得爽。

3.在模拟单选按钮的时候，还需要多一个hover的效果。这个效果是为了让用户得到更好的体验。所以，顺便就在css中对li增加一个css的hover效果吧。但是如果你hover效果还有其他的元素也要联动。那么就只能在该元素的onmouseover()和onmouseout()中操作那些其他元素的样式了。

4.为了更好的体验，hover上去后让用户知道该区域可以点击，建议将鼠标的样式设定为cursor:pointer;这样子鼠标移上之后就会变成一只小手的形状而不是箭头。

具体模拟的思路就是这样子了。个人感觉使用起来的效果还不错。就是不知道这个的效率是不是最好的。