如何用jq radio判断选中的时候取消选中效果?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何用jq radio判断选中的时候取消选中效果?

2016-05-31 10:23:20 2459 1
<input type="radio" id="aa" class="ico-green">

    if($("input[type=radio]").prop("checked")){
        $("input[type=radio]").prop("checked",true);
    }else{
        $("input[type=radio]").prop("disabled",false);
    }

本人研究了半天,在网上搜了一大堆答案。还是无法实现input radio多次单选再取消选中。
如果用input radio两个单项 就容易多,关键是一个input radio是怎么让用户单击选中,
当用户不想要这个radio的时候 就取消掉。

我写判断 条件不对吗?
screenshot

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:21:27

    可以换个思路嘛,既然你做的单选又不是原生样式,那么干脆就不需要input来记录选中值了。

    题主需要的功能是一个带有取消选中项的单选框。以下是核心代码;

    var $checkGroup = $(".check-group");
    var $checkItem = $checkGroup.children('.check-item');
    
    $checkItem.bind('click', function(e){
      var $this = $(this);
      if($this.hasClass('on')){
        $checkItem.removeClass('on');   
      }else{
        $checkItem.removeClass('on');
        $this.addClass('on');
      }
    });
    
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        .check-item{display:inline-block; width: 10px; height: 10px; border: solid 1px #ccc; border-radius: 50%;}
        .check-item.on{background: red;}
      </style>
    </head>
    <body>
      <div class="check-group">
        <div class="check-item"></div>
        <div class="check-item"></div>
        <div class="check-item"></div>
      </div>
    </body>
    </html>

    通过样式记录选中与否,item项的值可以通过 .data 方法绑定在dom上。

    0 0
相关问答

1

回答

maxcomputer可以查询holo的表吗?以外表的方式?

2022-07-26 10:59:12 59浏览量 回答数 1

1

回答

如图,binglog是开启的,但是源表insert 一条数据,目标表没有变化,这是咋回事?

2022-07-04 21:00:50 185浏览量 回答数 1

1

回答

maxcompute java sdk 有写入指定表分区的方法吗

2022-06-28 14:13:21 88浏览量 回答数 1

0

回答

老哥们好,jar包提交到yarn,报了这个错,idea运行没问题,standalone的sessio

2022-06-30 15:15:03 68浏览量 回答数 0

1

回答

JDBC数据库进阶中分页的优点是什么呀?

2021-10-28 21:03:22 127浏览量 回答数 1

1

回答

java.io.IOException: Stream closed? 400 报错

2020-06-02 13:17:16 311浏览量 回答数 1

1

回答

Java 中新的 Lock 接口相对于同步代码块(synchronized block)有什么优势?

2019-10-28 14:30:21 715浏览量 回答数 1

2

回答

[@徐雷frank][¥20]kotlin与Java比较有哪些优缺点呢?

2018-11-15 11:38:45 1873浏览量 回答数 2

1

回答

如果我使用run直接提交任务到yarn的方式,HA的效果还有用吗?

2018-10-18 15:39:03 1226浏览量 回答数 1

2

回答

企业邮箱常见错误提示504 the number of RCPT attempts is achieved the maximum threshold

2018-01-29 10:57:58 1852浏览量 回答数 2
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载