加载收音机选项无法正常工作

Question

我的价格表具有以下脚本和代码。一切正常，除了1分钟。单击单选按钮可以更改我的定价。但是，当页面被重新加载时，它总是加载第一个按钮的定价值，而我想加载第二个单选按钮的值。我的js知识很差，对此感到抱歉。

我尝试使用此代码$('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);

但是不幸的是，这没有帮助。

$('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);

jQuery(function() {
  $('.regular').click(function() {
    $('.value-1').html("89");
    $('.value-1--with-discount').html("");
  });
});

jQuery(function() {
  $('.discount').click(function() {
    $('.value-1').html("72");
    $('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");

  });
});

.col__pricing-table h3 {
    color: #3a434e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.col__pricing-table h4 {
    color: #315f9b;
    font-size: 21px;
    line-height: 23px;
    font-weight: 300;
    max-width: 196px;
    margin: 0 auto;
    padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
    font-weight: 400;
}
.col__pricing-table {
    margin-bottom: 30px;
    margin-top: 97px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #fff;
    line-height: 30px;
}
.col__pricing-table i {
    color: #3c74bb;
    font-size: 14px;
    font-style: italic;
    padding-bottom: 21px;
    display: inline-block;
}
.col__pricing-table ul {
    list-style: none;
    margin-top: 22px;
    text-align: center;
    padding: 0 48px;
}
.col__pricing-table ul li {
    cursor: pointer;
    color: #3c3c3c;
    font-family: "Source Sans Pro";
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    padding-top: 9px;
}
.col__pricing-table ul li i {
    margin-right: 5px;
}
.btn.btn-pricing__cta {
    color: #6b86a8;
    font-family: "Source Sans Pro";
    font-size: 17px;
    font-weight: 600;
    height: 40px;
    border-radius: 26px;
    border: 2px solid #6b86a8;
    padding: 10px 17px 9px 22px;
    line-height: 17px;
}
.col__pricing-table .price {
    color: #3c73ba;
    font-family: "Source Sans Pro";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.72px;
    margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
    font-size: 52px;
}
.col__pricing-table .type {
    background-color: #52E89E;
    padding: 50px 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 30px;
}
.col__pricing-table .pricing-footer {
    padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
}
.col__pricing-table.popular {
    margin-top: 10px;
}
.col__pricing-table.popular .price {
    padding-top: 80px;
}
.custom-container {
    max-width: 901px;
    margin: 0 auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>

</div>
<div class="radio">
  <label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>

<div class="col__pricing-table db-attached">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="db-wrapper">
            <div class="pricing__left">
                <h3>Plano A</h3>
                <div class="value-1--with-discount"></div>
                <div class="price">
                    R$<span class="value value-1">89</span>/mês
                </div>
                
                <i>por profissional de saúde</i>
                

                <ul class="pricing__features">
                    <li>Agenda</li>
                    <li>Cadastro de Pacientes</li>
                    <li>Prontuário Eletrônico</li>
                    </ul>
            </div>
        </div>
    </div><!-- first col ends -->
</div>

Answer 1

您需要使用$('input:radio[name="optradio"][value="discount"]').trigger('click');触发点击事件，因为您已经更改了点击价格。

//$('input:radio[name="optradio"]').filter('[value="discount"]').attr('checked', true);

jQuery(function() {
  $('.regular').click(function() {
    $('.value-1').html("89");
    $('.value-1--with-discount').html("");
  });
});

jQuery(function() {
  $('.discount').click(function() {
    $('.value-1').html("72");
    $('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");

  });
  $('input:radio[name="optradio"][value="discount"]').trigger('click');

});

.col__pricing-table h3 {
    color: #3a434e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.col__pricing-table h4 {
    color: #315f9b;
    font-size: 21px;
    line-height: 23px;
    font-weight: 300;
    max-width: 196px;
    margin: 0 auto;
    padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
    font-weight: 400;
}
.col__pricing-table {
    margin-bottom: 30px;
    margin-top: 97px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #fff;
    line-height: 30px;
}
.col__pricing-table i {
    color: #3c74bb;
    font-size: 14px;
    font-style: italic;
    padding-bottom: 21px;
    display: inline-block;
}
.col__pricing-table ul {
    list-style: none;
    margin-top: 22px;
    text-align: center;
    padding: 0 48px;
}
.col__pricing-table ul li {
    cursor: pointer;
    color: #3c3c3c;
    font-family: "Source Sans Pro";
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    padding-top: 9px;
}
.col__pricing-table ul li i {
    margin-right: 5px;
}
.btn.btn-pricing__cta {
    color: #6b86a8;
    font-family: "Source Sans Pro";
    font-size: 17px;
    font-weight: 600;
    height: 40px;
    border-radius: 26px;
    border: 2px solid #6b86a8;
    padding: 10px 17px 9px 22px;
    line-height: 17px;
}
.col__pricing-table .price {
    color: #3c73ba;
    font-family: "Source Sans Pro";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.72px;
    margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
    font-size: 52px;
}
.col__pricing-table .type {
    background-color: #52E89E;
    padding: 50px 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 30px;
}
.col__pricing-table .pricing-footer {
    padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
}
.col__pricing-table.popular {
    margin-top: 10px;
}
.col__pricing-table.popular .price {
    padding-top: 80px;
}
.custom-container {
    max-width: 901px;
    margin: 0 auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>

</div>
<div class="radio">
  <label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>

<div class="col__pricing-table db-attached">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="db-wrapper">
            <div class="pricing__left">
                <h3>Plano A</h3>
                <div class="value-1--with-discount"></div>
                <div class="price">
                    R$<span class="value value-1">89</span>/mês
                </div>
                
                <i>por profissional de saúde</i>
                

                <ul class="pricing__features">
                    <li>Agenda</li>
                    <li>Cadastro de Pacientes</li>
                    <li>Prontuário Eletrônico</li>
                    </ul>
            </div>
        </div>
    </div><!-- first col ends -->
</div>

Answer 2

您的费用更新是在click上触发的，而不是通过JS选择时触发的。同样，它发生在 before 之前，您设置了onclick属性（执行此onload）。试试这个：

jQuery(function() {
  $('.regular').click(function() {
    $('.value-1').html("89");
    $('.value-1--with-discount').html("");
  });
});

jQuery(function() {
  $('.discount').click(function() {
    $('.value-1').html("72");
    $('.value-1--with-discount').html("<span class='value__general'><span class='wd'>$</span>69<span class='wd'>/m</span></span>");

  });
});
jQuery( function(){$('input:radio[name="optradio"]').filter('[value="discount"]').click();});

.col__pricing-table h3 {
    color: #3a434e;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.col__pricing-table h4 {
    color: #315f9b;
    font-size: 21px;
    line-height: 23px;
    font-weight: 300;
    max-width: 196px;
    margin: 0 auto;
    padding-top: 56px;
}
.col__pricing-table h4 span.regular, h2.regular {
    font-weight: 400;
}
.col__pricing-table {
    margin-bottom: 30px;
    margin-top: 97px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #fff;
    line-height: 30px;
}
.col__pricing-table i {
    color: #3c74bb;
    font-size: 14px;
    font-style: italic;
    padding-bottom: 21px;
    display: inline-block;
}
.col__pricing-table ul {
    list-style: none;
    margin-top: 22px;
    text-align: center;
    padding: 0 48px;
}
.col__pricing-table ul li {
    cursor: pointer;
    color: #3c3c3c;
    font-family: "Source Sans Pro";
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    padding-top: 9px;
}
.col__pricing-table ul li i {
    margin-right: 5px;
}
.btn.btn-pricing__cta {
    color: #6b86a8;
    font-family: "Source Sans Pro";
    font-size: 17px;
    font-weight: 600;
    height: 40px;
    border-radius: 26px;
    border: 2px solid #6b86a8;
    padding: 10px 17px 9px 22px;
    line-height: 17px;
}
.col__pricing-table .price {
    color: #3c73ba;
    font-family: "Source Sans Pro";
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.72px;
    margin: 23px 0 3px;
}
.col__pricing-table .price span.value {
    font-size: 52px;
}
.col__pricing-table .type {
    background-color: #52E89E;
    padding: 50px 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 30px;
}
.col__pricing-table .pricing-footer {
    padding: 20px;
}
.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
}
.col__pricing-table.popular {
    margin-top: 10px;
}
.col__pricing-table.popular .price {
    padding-top: 80px;
}
.custom-container {
    max-width: 901px;
    margin: 0 auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="radio-wrapper">
<div class="radio">
<label class="custom-label"><div class="inv-label"></div><input class="regular" type="radio" name="optradio">pagamento mensal
<span class="checkmark"></span>
</label>

</div>
<div class="radio">
  <label class="custom-label"><div class="inv-label"></div><input class="discount" type="radio" name="optradio" value="discount">pagamento anual (10% de desconto)
<span class="checkmark"></span>
</label>
</div>
</div>

<div class="col__pricing-table db-attached">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="db-wrapper">
            <div class="pricing__left">
                <h3>Plano A</h3>
                <div class="value-1--with-discount"></div>
                <div class="price">
                    R$<span class="value value-1">89</span>/mês
                </div>
                
                <i>por profissional de saúde</i>
                

                <ul class="pricing__features">
                    <li>Agenda</li>
                    <li>Cadastro de Pacientes</li>
                    <li>Prontuário Eletrônico</li>
                    </ul>
            </div>
        </div>
    </div><!-- first col ends -->
</div>