起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 8751|回复: 18

[结贴] checkbox怎么实现单选

  [复制链接]

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
发表于 2016-11-23 10:28:05 | 显示全部楼层 |阅读模式
checkbox怎么实现单选,radio样子太丑,客户要求用checkbox,求大神解决
代码如下:
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row5"
        style="border:1px solid #F4F4F4;">
        <div class="x-col x-col-10" xid="col13" style="text-align:center;">
          <div component="$UI/system/components/justep/button/checkboxPC" class="checkbox"
            xid="checkboxPC5" style="top:5px;left:8px;" name="che"/>
        </div>  
        <div class="x-col" xid="col14">
          <div component="$UI/system/components/justep/labelEdit/labelEdit"
            class="x-label-edit x-label30" xid="labelEdit5">
            <label class="x-label" xid="label5" style="width:246px;margin-top:9px;margin-left:5px;"><![CDATA[酷米发布会视屏设计]]></label>  
            <div component="$UI/system/components/justep/output/output" class="x-output x-edit"
              xid="output5"/>
          </div>
        </div>
      </div>  
      <div component="$UI/system/components/justep/row/row" class="x-row" xid="row6"
        style="border:1px solid #F4F4F4;">
        <div class="x-col x-col-10" xid="col16" style="text-align:center;">
          <div component="$UI/system/components/justep/button/checkboxPC" class="checkbox"
            xid="checkboxPC6" style="left:7px;top:5px;" name="che"/>
        </div>  
        <div class="x-col" xid="col17">
          <div component="$UI/system/components/justep/labelEdit/labelEdit"
            class="x-label-edit x-label30" xid="labelEdit6">
            <label class="x-label name" xid="label6" style="width:202px;font-size:small;"><![CDATA[酷米发布会海报设计]]></label>  
            <div component="$UI/system/components/justep/output/output" class="x-output x-edit"
              xid="output6"/>
          </div>
        </div>
      </div>

1

主题

1831

帖子

821

积分

高级会员

Rank: 4

积分
821
QQ
发表于 2016-11-23 12:42:01 | 显示全部楼层
回复 支持 反对

使用道具 举报

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
 楼主| 发表于 2016-11-23 18:14:09 | 显示全部楼层
大雁子 发表于 2016-11-23 12:42
参考:http://blog.csdn.net/qq_33242126/article/details/52334485

我的布局是5个row,在每个row第一个col中,而且X5中checkbox源码中是div给的class,这个例子不合适啊
回复 支持 反对

使用道具 举报

1

主题

6163

帖子

2095

积分

金牌会员

Rank: 6Rank: 6

积分
2095
QQ
发表于 2016-11-23 18:19:08 | 显示全部楼层
庞胜文 发表于 2016-11-23 18:14
我的布局是5个row,在每个row第一个col中,而且X5中checkbox源码中是div给的class,这个例子不合适啊 ...

那就建议你用原生的dom+js的写法完成了  使用dom找到选中checkbox  使用js添加和删除选中的样式并判断选中哪个
回复 支持 反对

使用道具 举报

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
 楼主| 发表于 2016-11-23 19:27:44 | 显示全部楼层
我用jquery写的,checkbox的name是che,大神帮我看下有什么问题,这个没有效果,也没有报错
$(function(){
        $('div[name="che"]').each(function(){
            $(this).click(function(){
                if($(this).attr('checked')){
                    $(':div[name="che"]').removeAttr('checked');
                    $(this).attr('checked','checked');
                    alert(this.id);
                }
            });
        });
    });
回复 支持 反对

使用道具 举报

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
 楼主| 发表于 2016-11-24 09:28:31 | 显示全部楼层
半导体 发表于 2016-11-23 18:19
那就建议你用原生的dom+js的写法完成了  使用dom找到选中checkbox  使用js添加和删除选中的样式并判断选 ...

checkbox状态改变的JS怎么写啊
回复 支持 反对

使用道具 举报

1

主题

6163

帖子

2095

积分

金牌会员

Rank: 6Rank: 6

积分
2095
QQ
发表于 2016-11-24 13:48:10 | 显示全部楼层
庞胜文 发表于 2016-11-24 09:28
checkbox状态改变的JS怎么写啊

如果你想要使用dom +js  的方法   就要注意组件的结构  因为组件  它不是一个简单的input  组件进行过封装  你需要找的这个input才能添加checked属性
回复 支持 反对

使用道具 举报

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
 楼主| 发表于 2016-11-24 14:07:22 | 显示全部楼层
半导体 发表于 2016-11-24 13:48
如果你想要使用dom +js  的方法   就要注意组件的结构  因为组件  它不是一个简单的input  组件进行过封 ...

有代码参考吗
回复 支持 反对

使用道具 举报

1

主题

6163

帖子

2095

积分

金牌会员

Rank: 6Rank: 6

积分
2095
QQ
发表于 2016-11-24 14:09:21 | 显示全部楼层

没有  我也是很久以前写过类似的代码
回复 支持 反对

使用道具 举报

20

主题

83

帖子

152

积分

初级会员

Rank: 2

积分
152
QQ
 楼主| 发表于 2016-11-24 19:40:15 | 显示全部楼层
半导体 发表于 2016-11-24 14:09
没有  我也是很久以前写过类似的代码

求代码,X5这个拿span写checkbox,好难取值,我用过name取值,不报错也没效果
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-11-24 11:15 , Processed in 0.055284 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表