V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
shavy
V2EX  ›  问与答

一个页面多个按钮组,怎么区分?

  •  
  •   shavy · 2019-08-20 16:02:44 +08:00 · 1531 次点击
    这是一个创建于 1926 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用了 buttons.css(v2.0),主要使用到其中的 button-group,发现在一个页面里有一个以上按钮组的时候,没法区分,比如说:

    <div>
    	<font>性别:</font>
    	<div class="button-group" name="b1">
    	<button id="fsex0" name="fsex" type="button" class="button button-giant button-rounded">男</button>
    	<button id="fsex1" name="fsex" type="button" class="button button-giant button-rounded">女</button>
    	</div>
    
    			
    	<font style="font-size: 28px;">班级:</font>
    	<div class="button-group" name="b2">
    	<button id="fclass0" name="fclass" type="button" class="button button-jumbo button-rounded">1 班</button>
    	<button id="fclass1" name="fclass" type="button" class="button button-jumbo button-rounded">2 班</button>
    	<button id="fclass2" name="fclass" type="button" class="button button-jumbo button-rounded">3 班</button>
    	<button id="fclass3" name="fclass" type="button" class="button button-jumbo button-rounded">4 班</button>
    	</div>
    </div>
    

    这样出来的效果是,我选了“男”,再选择“ 1 班”,那么“男”就自动取消选择了,说明这几个 button,都是在同一个组里,我通过 id,name 等方式区分,发现没效果。要怎么做,才能达到我要的效果呢?

    6 条回复    2019-08-21 16:19:01 +08:00
    yangg
        1
    yangg  
       2019-08-20 17:05:06 +08:00
    没人维护的东西了吧,官网都是一样,jquery 都加载不了,

    可以自己写 js 来分组。
    shavy
        2
    shavy  
    OP
       2019-08-20 17:31:48 +08:00
    @yangg 谢谢,但是自己还不懂,所以只能用别人现成的东西
    rain0002009
        3
    rain0002009  
       2019-08-20 17:44:13 +08:00
    所以说你想要一个长得像按钮的 checkbox
    mara1
        4
    mara1  
       2019-08-20 19:33:55 +08:00
    男女用 radio,班级用 checkbox,jQuery 来写就够了,不必用太冷门的东西。

    如果自己能做主的话,上 Vue 或者 React 吧
    shavy
        5
    shavy  
    OP
       2019-08-21 16:04:17 +08:00
    @rain0002009 是的,我就是要按钮组,移动端使用,radio 太小了,点不到
    shavy
        6
    shavy  
    OP
       2019-08-21 16:19:01 +08:00
    @mara1 我就是个人兴趣,其实我对 js 很不熟悉
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3130 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:31 · PVG 21:31 · LAX 05:31 · JFK 08:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.