简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 如何用jq radio判断选中的时候取消选中效果？
PHP中文网
PHP中文网 2017-04-10 17:56:45
0
3
565

<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中文网

认证0级讲师

모든 응답(3)
小葫芦
小葫芦2017-04-10 17:58:45 3층

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

좋다 +0
답글 추가
黄舟
黄舟2017-04-10 17:58:45 2층

用checkbox

좋다 +0
답글 추가
洪涛
洪涛2017-04-10 17:58:45 1층

可以换个思路嘛，既然你做的单选又不是原生样式，那么干脆就不需要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上。

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！