用于单选按钮的jquery单击处理程序无法正常工作

时间：2015-05-30 01:17:15

标签： jquery

如果我尝试从上到下点击，单选按钮效果很好，但是一旦这个周期完成，它们就不会受到影响。

我正在点击外部div，然后通过find选择内部元素。

我提供了以下代码。

我已经更新了以下代码。单选按钮有效，但我希望自动点击链接（当我们点击绿色面板标题类元素时，它会展开。

 <!DOCTYPE html>
<html>

<head>

    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>Plan Selection</title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
    @font-face {
        font-family: myFirstFont;
        src: url(styles/2BF294_D_0.woff);
    }

    .heading {
        font-family: MorebiRounded-Regular;
        font-size: 30px;
    }
    .green-bk{
        background-color: #06a94e !important;
    }
    .container {
        margin-top: 40px;
    }

    .plan-info {
        font-family: Arial;
        font-size: 16px;
        display: inline;
        float: right;
    }
    .continue{
      margin-top: 30px; 
      width:100%;
      color: white; 
      background-color: #06a94e;
      border: 0;
      text-overflow: ellipsis;
      border-radius: 23px;
      font-family: MorebiRounded-Regular;
      height: 40px;
      font-size: 18px; 
    }
    .continue:hover  
    {
        color: #fff;
        background-image:none;
        background-color:#06a94e;
    }

    .continue:active  
    {
        color: #fff;
        background-image:none;
        background-color:#06a94e;
    }


    .hidd-td{
        visibility: hidden;
    }
    .grey-panel{
        background-color: #ccc;   
    }
     .green-panel{
        background-color: #06A94E;
    }
    .first-td{
        border-top: none !important; 
    }
    .mori{
        font-family: MorebiRounded-Regular;
    }


    .subsection{
        font-family: MorebiRounded-Regular;
        font-size: 16px;
        text-align: center;
        color: white; 
    } 

    .black-subsection{
               font-family: MorebiRounded-Regular;
        font-size: 16px;
        text-align: center;
        /*color: white;  */
    }

.grey-wrapper{
    /*background-color: red;*/
    height:auto;
    margin-bottom: 50px;

}

.push-radio{
    margin-right: 10px !important;
}


/*mobile classes*/


    .mo-heading {
        font-family: MorebiRounded-Regular;
        font-size: 30px;
    }



    .plan-info {
        font-family: Arial;
        font-size: 16px;
        display: inline;
        float: right;
    }


    .mo-continue{
        color: white;
        width:100%;
        background-color: grey;
        padding:13px; 
        /*font-family: MorebiRounded-Regular;*/
        font-size: 22px;         
    }
    .mo-continue:hover  
    {
        color: white;
        background-image:none;
        background-color: grey;
    }

    .mo-continue:visited  
    {
        color: white;
        background-image:none;
        background-color: grey;
    }  
    .mo-continue:active  
    {
        color: white;
        background-image:none;
        background-color: grey;
    }    

    .mo-push-radio{
        /*margin-right: 1px !important;*/

    }










#DIV_1 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    height: 43px;
    text-align: center;
    width: 1583px;
    perspective-origin: 791.5px 21.5px;
    transform-origin: 791.5px 21.5px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 17px/normal MorebiRounded-Regular, Arial;
    outline: rgb(51, 51, 51) none 0px;
    padding: 10px 0px;
}/*#DIV_1*/

#SPAN_2 {
    background-position: 0px 50%;
    box-sizing: border-box;
    color: rgb(6, 169, 78);
    cursor: pointer;
    display: block;
    height: 21px;
    left: 15px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 60.734375px;
    z-index: 1010;
    align-self: stretch;
    perspective-origin: 30.359375px 10.5px;
    transform-origin: 30.359375px 10.5px;
    background: rgba(0, 0, 0, 0) url(https://arlodev.netgear.com/img2/title_back_1.png) no-repeat scroll 0px 50% / auto padding-box border-box;
    border: 0px none rgb(6, 169, 78);
    font: normal normal normal normal 17px/normal MorebiRounded-Regular, Arial;
    outline: rgb(6, 169, 78) none 0px;
    padding: 0px 0px 0px 20px;
}/*#SPAN_2*/

#SPAN_3 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    text-align: center;
    border: 0px none rgb(51, 51, 51);
    font: normal normal bold normal 18px/normal MorebiRounded-Regular, Arial;
    outline: rgb(51, 51, 51) none 0px;
    top:-5px;
}/*#SPAN_3*/




.setup-progress {
    height: 8px;
    background-color: #06a94e;
}

.setup-wrap {
    top: 60px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #F8F8F8;
}

.change-subs{
    margin-top:10px;
    font-family: MorebiRounded-Regular; 
}

.dark-green{
    background-color: green; 
}

.dark-grey{
    background-color: grey !important; 
}


    </style>

</head>

<body>






<div class="row">
<div class="col-md-12">
 <h3 class="change-subs text-center"> Change Subscription</h3>
</div>
</div>



<div id="DIV_1">
    <span id="SPAN_2">BACK
    </span> 

<!--     <span id="SPAN_3"> 
    <h3 class="change-subs"> 2Change Subscription</h3>
    </span>
 -->
</div>





<!-- mobile starts  -->


  <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">

                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading green-bk">
                            <h4 class="panel-title mo-heading">

<input class="mo-push-radio" type="radio" name="plan-mobile">                      
                            <a class="mo-planlink"  data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            ELITE</a>
                            <div class="plan-info">14.99/Mo | 149.99/Yr </div>
                        </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            60 Days of Cloud Recording
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Up to 15 Cameras
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Unlimited Support
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Available Add-Ons: 
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading green-bk">
                            <h4 class="panel-title mo-heading">
<input class="mo-push-radio" type="radio" name="plan-mobile">                                                  
                            <a class="mo-planlink" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">PREMIER</a>
                            <div class="plan-info">14.99/Mo | 149.99/Yr </div>         
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            60 Days of Cloud Recording
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Up to 15 Cameras
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Unlimited Support
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            $14 99 / Mo
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading green-bk">
                            <h4 class="panel-title mo-heading">
<input class="mo-push-radio" type="radio" name="plan-mobile">                                                  
                            <a class="mo-planlink" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">BASIC</a>
                          <div class="plan-info">FREE </div>                              
                        </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                <table class="table">
                                    <tr>
                                        <td>
                                            60 Days of Cloud Recording
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Up to 15 Cameras
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Unlimited Support
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            $14 99 / Mo
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            <button type="submit" class="btn mo-continue"> CONTINUE</button>
            </div>

        </div>

</div>

<!-- mobile ends -->

<script>
$(document).ready(function  () {

// mobile

$('.mo-planlink').on( "click", function() {
  console.log( ' plan link clicked ', this );

    var nearestRadio = $(this).parent().find('input'); 

    console.log(' nearest Radio = ', nearestRadio);
    nearestRadio.attr('checked', 'checked');

}); 




$('.mo-push-radio').on( "click", function() {
  console.log( ' plan link clicked ', this );

    nearestRadio = $(this).next().click(); 
    console.log(' nearest Radio = ', nearestRadio);
    nearestRadio.attr('checked', 'checked');

    // nearestRadio.parents().eq(2).addClass('dark-grey');

    var near =   nearestRadio.parents().eq(2).children(); 
  console.log(' near ---> = ', near );

    // near.addClass('dark-grey');




    if( nearestRadio.is(':checked') ){
      nearestRadio.attr('checked', false);
}else{
      nearestRadio.attr('checked', true);
}




}); 



$('.panel-heading').on( "click", function(e) {
    var self =  this; 


    // grab the nearest list and click it. 


    $('.panel-heading').removeClass('dark-grey'); 

    $(this).addClass('dark-grey'); 



var $radios = $('input[type="radio"][name="plan-mobile"]')
    console.log('$radios', $radios);

    $radios.prop("checked", false);

    current_el = $(this).find( "input" ); 
    console.log("current_el =", current_el);
        current_el.prop("checked", true);







var $links = $('a'); 

    console.log('$$links', $links);


    current_a = $(this).find( "a" ); 
    console.log("current_a =", current_a);

    // current_a.click(); 
    // e.preventDefault();

}); 




// desktop

$('.push-radio').on( "click", function() {
  console.log( ' desk - plan link clicked ', this );
    var  nearestSquare = $(this);
    $('.push-radio').parents().removeClass( 'dark-green' );
    nearestSquare.parents().eq(5).addClass( 'dark-green' );


}); 









})

</script>



</body>
</html>

1 个答案:

答案 0 :(得分：0)

您的代码有效，

 nearestRadio.attr('checked', 'checked');

点击

后，您始终将其设置为选中状态

你的意思是：

if( nearestRadio.is(':checked') ){
      nearestRadio.prop('checked', false);
      alert('this radio already checked');
}else{
      nearestRadio.prop('checked', true);
      alert('this radio is not checked');
}
相关问题
最新问题