Heim  >  Fragen und Antworten  >  Hauptteil

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

<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的时候 就取消掉。

我写判断 条件不对吗?


http://jsbin.com/buxequwasu/edit?html,js,output

PHP中文网PHP中文网2770 Tage vor564

Antworte allen(3)Ich werde antworten

  • 高洛峰

    高洛峰2017-04-10 17:58:45

    判断条件写错了吧...jquery的prop方法一个值是返回当前值...
    两个值表示设置为后一个值╮(╯▽╰)╭

    Antwort
    0
  • 黄舟

    黄舟2017-04-10 17:58:45

    用checkbox

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-10 17:58:45

    可以换个思路嘛,既然你做的单选又不是原生样式,那么干脆就不需要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>
      <p class="check-group">
        <p class="check-item"></p>
        <p class="check-item"></p>
        <p class="check-item"></p>
      </p>
    </body>
    </html>
    

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

    Antwort
    0
  • StornierenAntwort