如何從兩個不同的表單集中選擇一個單選按鈕？
[英]How do I select only one radio button from two different form sets?
問題描述
<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個包。用戶應該能夠一次從這些不同的包集中選擇一個，請提供幫助。 TIA
3 個解決方案
解決方案1
2 已采納 2018-06-07 05:43:58
由於名稱相同，因此將事件處理程序綁定到輸入和名稱上。
我不知道您是否使用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>
解決方案2
0 2018-06-07 05:56:37
與其保留兩個表單標簽，不如保留一個表單標簽，並將整個html保留在該表單標簽中。
<form method="post" action="
<?php echo base_url('services'); ?>">
<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>
<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>
</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>
<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>
</div>
</div>
</form>
解決方案3
0 2018-06-07 06:12:50
如果已選擇第一個表單單選按鈕，則可以禁用或隱藏第二個表單單選按鈕，反之亦然
<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" class="activenicksrv_form" 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" class="extranicksrv_form" 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
/*-----It will disable second form radio button---------*/
$(".activenicksrv_form input[name=service]")
.on("click", changeEvent);
function changeEvent(event){
if ($('.activenicksrv_form input[name=service]:checked').length > 0) {
$(".extranicksrv_form input[type=radio]").attr('disabled', true);
}
}
//--------
/*-----It will disable first form radio button---------*/
$(".extranicksrv_form input[name=service]")
.on("click", changeEvent2);
function changeEvent2(event){
if ($('.extranicksrv_form input[name=service]:checked').length > 0) {
$(".activenicksrv_form input[type=radio]").attr('disabled', true);
}
}
</script>
我有兩個單選按鈕，但即使我們選擇不同的收音機，表格也只能獲得一個收音機值
[英]I have two radio button but the the form only can get one radio value even we choose different radio
如何在一組div之間只選擇一個div，如單選按鈕？
[英]How do I select only one div between a group of divs like a radio button?
如何使用JavaScript以一種形式驗證兩組單選按鈕？
[英]How to validate two sets of radio buttons in one form using JavaScript?
如何使用jQuery / JavaScript檢測多組單選按鈕更改並更改單獨的表單輸入？
[英]How do I use jQuery/JavaScript to detect multiple sets of radio button changes and change a separate form input?
當我重新加載頁面並且沒有選中 Laravel 6.0 中的單選按鈕之一時，如何一次只顯示一個表單
[英]How do i show only one form at a time when i reload the page and didn't check one of the radio button in Laravel 6.0
限制用戶只能從具有相同值的兩組中選擇一個單選按鈕
[英]Restrict user to select only one radio button from two groups with same value
當數據來自數據庫時，如何一次只選擇一個單選按鈕，而又取消選擇javascript中的其他單選按鈕？
[英]How to select only one radio button at one time and deselect the others in javascript when the data are comes from database?
在ASP中使用javascript時，如何選擇兩個單選按鈕？
[英]How do you select one radio button out of two when you use javascript in ASP?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
HTML表單，從三個單選集中僅選擇一個單選按鈕
我有兩個單選按鈕，但即使我們選擇不同的收音機，表格也只能獲得一個收音機值
如何在一組div之間只選擇一個div，如單選按鈕？
如何僅選擇一個單選按鈕？
如何使用JavaScript以一種形式驗證兩組單選按鈕？
如何使用jQuery / JavaScript檢測多組單選按鈕更改並更改單獨的表單輸入？
當我重新加載頁面並且沒有選中 Laravel 6.0 中的單選按鈕之一時，如何一次只顯示一個表單
限制用戶只能從具有相同值的兩組中選擇一個單選按鈕
當數據來自數據庫時，如何一次只選擇一個單選按鈕，而又取消選擇javascript中的其他單選按鈕？
在ASP中使用javascript時，如何選擇兩個單選按鈕？
相關標簽