作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label><span class="price">$7.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" /> <label>
<span class="price">$14.99</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label><span class="price">$24.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label><span class="price">$44.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label><span class="price">$12.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" /> <label>
<span class="price">$23</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label><span class="price">$40.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label><span class="price">$59.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
这是我尝试过的方法,我只需要从任一服务中选择一个单选按钮。如果选择了一个包中的一项服务,则不应选择其他包服务。我还有 6 个其他包用户应该能够一次从这些不同的包集中选择一个请帮忙。时间差
最佳答案
因为名称相同,所以我在输入和名称上绑定(bind)了事件处理程序。
不知道你有没有用jQuery
为方便起见,我在下面使用 jQuery 进行了此操作。
我唯一做的就是添加事件处理程序。
$('input[name="service"]').click(function(event){
$('input[name="service"]:checked').not(this).prop('checked', false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label><span class="price">$7.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" /> <label>
<span class="price">$14.99</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label><span class="price">$24.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label><span class="price">$44.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label><span class="price">$12.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" /> <label>
<span class="price">$23</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label><span class="price">$40.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label><span class="price">$59.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
关于javascript - 如何从两个不同的表单集中只选择一个单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50733678/
我是一名优秀的程序员,十分优秀!