javascript - Onload 单选选项无法正常工作
问题描述
我的定价表有以下脚本和代码。一切正常,除了 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>
解决方案
您需要触发点击事件,$('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>
推荐阅读
- angular - 忽略 Angular 8 应用程序中所有未注册的路由
- c# - Unity 2019.2.4f1中OVRPlayerController之间的切换
- javascript - 如何使用引导程序 4 在移动设备上隐藏 gridview 列?
- external - Azure Databricks 高并发 + 表访问控制 + 外部配置单元元存储 + ADLS 直通
- java - 如何生成自定义 jvm-cucumber HTML,通过 Jenkins 发送它以及 ftp json 结果?
- php - 使用 Facebook 登录:getAccessToken() 函数是否有参数?
- r - 将字符串字符转换为R中的列表
- javascript - 如何根据值的权重找到最相似的数组?
- django - 传输中的 Django Fernet 字段和数据
- xamarin - 可以不等待就调用“Navigate()”吗?