关于用span模拟radio传值的问题

最新推荐文章于 2024-09-22 17:07:50 发布

原创最新推荐文章于 2024-09-22 17:07:50 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个注册界面中企业规模选项的优化过程，通过使用jQuery改进了单选框的交互方式，实现了更简洁高效的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个注册界面有个企业规模的选项.是四个单选框.

而问题是源码是这样的:

<li><label class="ml10"><span class="mn-radio-item <c:if test="${custComp.compScale eq 2}">mn-selected</c:if>"></span> 中型企业</label>
<label class="ml10"><span class="mn-radio-item <c:if test="${custComp.compScale eq 3}">mn-selected</c:if>"></span> 小型企业</label>
<label class="ml10"><span class="mn-radio-item <c:if test="${custComp.compScale eq 4}">mn-selected</c:if>"></span> 微型企业</label></li>

这个就看着狠糟心了.切图师用的是span标签来模拟的那个单选框的样子.这点让我狠不理解.本身自己也是个菜鸟.而span根本没有value值这个属性.我该怎么办,最后听说可以用隐藏域来绑定这个值,后来就硬着头皮做了但是我做的每选一项都要发送一个ajax请求

.我的实现思路就不说了.因为没什么用.后来代码被北京的大佬接管以后.把我那点改了我看了看源码不尽竖起大拇指.

$(function(){
    var $items0 = $(".reg-items:eq(0)");
    //企业规模
    var $items0_li3_ = $items0.find("li:eq(3)");
    $items0_li3_.find("label").click(function(){
        $(this).find("span").addClass("mn-selected");
        $(this).siblings().find("span").removeClass("mn-selected");
        var index = $(this).index();
        $("#compScale").val(index + 1);
    });

这个是他写的js.一下就解决了问题.所以我记录下.以便自己·在遇到这个问题的时候好做参考:

1.首先获得第一个reg-items这个div(因为所要操作的span就在这个div中)

2.找到这个div里的li子节点的角标为3的元素.其实是第四个。jquery的eq相当于一个循环下标从0开始.

3.然后找到li元素中的label元素.添加一个点击事件.

4.点击事件的实现逻辑是当前选中的label中的span节点,为其添加一个样式.

5.然后获得当前选中label的所有兄弟节点.获得所有兄弟节点后得到兄弟节点内部的span子节点,然后删除所有的样式.

6.获取当前选中的label的index值(这个index值是下标值,从0开始的)

7.然后未一个隐藏域赋值,把下标值赋值过去(记得要加1). //这样就可以有 1 2 3 4这样的值了