为什么靠jquery动态给的checked值只能点一次?

代码如下:

问题:当我点击li的时候给里面的input一个checked值,让他呈现选中状态,但是当我点了其他的li再回来点击时却怎么也选不中了,但是checked值是有的。

<div class = "bank_wrap ">
                <ul>
                    <li><input type="radio" name = "pay"><div><img src = "images/zhifubao.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/scanner_pay.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/caifutong.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/weixinzhifu.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/zaixianzhifu.png"></div></li>
                    <div style = "clear:both;"></div>
                </ul>
            </div>
 
            
 <script type = "text/javascript">           
            function click_bank (){
            
                $(".bank_wrap").find("li").click(function(){

                         $(this).find("input").attr("checked",true)      
                   
                });

        }  

        click_bank();    

</script>
阅读 3.2k
6 个回答

别用attr,用prop

$(".bank_wrap").find("li").click(function(){
      $("input[name='pay']").attr("checked", false);
      $(this).find("input").attr("checked",true);
  });

新建一个文件, 粘贴代码, 运行一下:

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>Document</title> 
 </head> 
 <body> 
  <script type="text/javascript" src="jquery.min.js"></script> 
  <div class="bank_wrap "> 
   <ul> 
    <li><input type="radio" name="pay" />
     <div>
      <img src="images/zhifubao.png" />
     </div></li> 
    <li><input type="radio" name="pay" />
     <div>
      <img src="images/scanner_pay.png" />
     </div></li> 
    <li><input type="radio" name="pay" />
     <div>
      <img src="images/caifutong.png" />
     </div></li> 
    <li><input type="radio" name="pay" />
     <div>
      <img src="images/weixinzhifu.png" />
     </div></li> 
    <li><input type="radio" name="pay" />
     <div>
      <img src="images/zaixianzhifu.png" />
     </div></li> 
    <div style="clear:both;"></div> 
   </ul> 
  </div> 
  <script type="text/javascript">
              function click_bank (){
                  $(".bank_wrap").find("li").click(function(e){
                      $("input[name='pay']").attr("checked", false);
                      $(this).find("input").attr("checked",true);
                  });
          }

          click_bank();

  </script>  
 </body>
</html>

我这边完整的代码,除了图片


<!DOCTYPE html>
<html>
<head>
    <title>支付页面</title>
    <meta charset = "utf-8">
    <script type="text/javascript" src = "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <style>
        
        body {background-color: #f5f5f5;}
        .status_pay {width:1187px;margin:0 auto;}
        .status_pay p:first-child {font-size: 15px;font-weight: bold;color:#50504f;}
        .status_pay p:last-child  {font-size:13px;color:#50504f;margin-top: -5px;}
        .status_pay span {float: right;position:relative;top:-15px;font-size:14px;color:#50504f;}
        .status_pay span a{color:#f08512;font-size:25px;font-weight: bold;font-family: '微软雅黑';}
        .bank_list {width:1187px;margin:0 auto;background-color: #ffffff;padding-top: 25px;padding-bottom: 25px;margin-top: 30px;}
        .bank_icon {width:1137px;border:2px solid #cccccc;margin:0 auto;}
        .bank_icon p {padding-left: 22px;font-size:15px;font-weight: bold;}
        .bank_icon p a {display: inline-block;width:16px;height:16px;margin-right: 10px;position: relative;top:2px;}
        .bank_icon p a img {width:100%;}
        .bank_wrap {background-color: #fafcfb;padding-top: 17px;}
        .bank_icon ul {width:1000px;margin:0;}
        .bank_icon ul li {border:1px solid #cccccc;width:189px;height:41px;list-style-type: none;float:left;margin-right: 30px;margin-bottom: 30px;padding-left: 10px;position:relative;overflow: hidden;}
        .bank_icon ul li div {width:160px;height:100%;float:left;position: absolute;top:50%;margin-top: -20px;left:45px}
        .bank_icon ul li input {float:left;margin-top: 15px;}
        .bank_icon ul li div img {width:90%;height:100%;}
        /*.online_bank {width:1137px;height:53px;border-right:2px solid #cccccc;border-left:2px solid #cccccc;margin:0 auto;overflow: hidden;}
        .online_bank p {padding-left: 22px;font-size:15px;font-weight: bold;}
        .online_bank p a {display: inline-block;width:16px;height:16px;margin-right: 10px;position: relative;top:2px;}
        .online_bank p a img {width:100%;}*/
        /*.online_bank_list {width:1137px;height:136px;border:2px solid #bdddcc;margin:0 auto;}
        .online_bank_list p {padding-left: 22px;font-size:15px;font-weight: bold;}
        .online_bank_list p a {display: inline-block;width:16px;height:16px;margin-right: 10px;position: relative;top:2px;}
        .online_bank_list p a img {width:100%;}
        .online_bank_list ul {}
        .online_bank_list ul li {border:1px solid #cccccc;width:189px;height:41px;list-style-type: none;float:left;margin-right: 30px;margin-bottom: 30px;} */
        .intro {width:157px;height:33px;font-size:12px;display: inline-block;margin-top: 5px;color:#777777;}
        .pay_btn {display: block;width:165px;height:42px;background-color: #f08512;color:white;line-height: 42px;text-align: center;border-radius: 3px;font-weight: bold;margin-top: 10px;float:right;margin-right:20px;text-decoration:none;}

        .on {display: block;}
        .off {display: none;}


        @font-face { 
  font-family: msyh; 
  src: url('msyh.ttf'); 
} 
.my_CSS3_class { 
  font-family: msyh; 
  
}

    </style>
</head>
<body>
    <div class = "status_pay">
        <p>订单提交成功,请你尽快付款!订单号:4413738946</p>
        <span>应付金额:<a>64.00</a>元</span>
        <p>请你在24小时内完成支付,否则订单会被自动取消。</p>

    </div>
    <div class = "bank_list">
        <div class = "bank_icon " style="border:2px solid #bdddcc">
            <p><a class = "change_btn on" onclick="change($(this))"><img src = "images/up_icon.png"></a>支付平台</p>
            <div class = "bank_wrap ">
                <ul>
                    <li><input type="radio" name = "pay"><div><img src = "images/zhifubao.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/scanner_pay.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/caifutong.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/weixinzhifu.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/zaixianzhifu.png"></div></li>
                    <div style = "clear:both;"></div>
                </ul>
            </div>
            
        </div>
        <div class = "bank_icon" style="">
            <p><a class = "change_btn" onclick="change($(this))"><img src = "images/down_icon.png"></a>网上银行</p>
            <div class = "bank_wrap off" >
                <ul>

                    <li><input type="radio" name = "pay"><div><img src = "images/jianshe.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/gongshang.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/zhongguo.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/nongye.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/zhaoshang.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/jiaotong.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/guangda.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/youzheng.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/xingye.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/guangfa.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/pufa.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/minshneg.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/pingan.png"></div></li>
                    <li><input type="radio" name = "pay"><div><img src = "images/beijing.png"></div></li>
                    <div style = "clear:both;"></div>
                </ul>
            </div>
        </div>
        <div class = "bank_icon" style="">
            <p><a class = "change_btn" onclick="change($(this))"><img src = "images/down_icon.png"></a>线下支付</p> 
            <div class = "bank_wrap off" >
                <ul>
                    <li><input type="radio" name = "pay"><div><img src = "images/zizhuzhuanzhang.png"></div></li>
                    <li class = "intro" style="border:none;">超过支付限额,建议自助转账<br>你的经纪人将协助你完成支付</li>                    
                    <div style = "clear:both;"></div>
                </ul>
                  
            </div>
           
        </div>
        <a href = "#"class = "pay_btn">立即支付</a>
        <div style = "clear:both;"></div>
    </div>


    <script type="text/javascript">
        
        function change (obj){
           
            if(obj.hasClass("on")){
             
              $(obj).removeClass("on"); 
              $(obj).parent("p").siblings("div").addClass("off");
              $(obj).find("img").attr("src","images/down_icon.png");
              $(obj).parent("p").parent("div").css("border","2px solid #cccccc");
               

            }else{
                
                $(obj).parent("p").siblings("div").removeClass("off"); 
                
                $(obj).parent("p").siblings("div").addClass("on");
                $(obj).addClass("on");
                $(obj).find("img").attr("src","images/up_icon.png");
                $(obj).parent("p").parent("div").css("border","2px solid #bdddcc");  
                
            }
        }



        function click_bank (){
            
                $(".bank_wrap").find("li").click(function(){
                      $("input[name='pay']").attr("checked", false);
                      $(this).find("input").attr("checked",true);
               });

        }  

        click_bank();    

    </script>
</body>
</html>

为啥要用jquery。html天生就是选中一个的吧。

哪里那么麻烦?

$(".bank_wrap ul li").each(function(){
                   $(".check").click(function(){//这个check是$(".bank_wrap ul li")下面的input的类名,直接加上,复制这段代码,妥妥的
                    $(".check").attr("checked", "");
                    $(this).children("input").attr("checked","checked");
                   });
            })

我昨天也遇到过这个问题。后来查了半天,发现在jQuery1.6版本之后,对于元素固有的属性,使用prop`。

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.

  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题