如何从两个不同的表单集中仅选择一个单选按钮？

Question

<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

Answer 1

由于名称相同，我在输入和名称上绑定事件处理程序。

我不知道你是否使用jQuery。

为方便起见，我在下面用jQuery做了。

我唯一做的就是添加事件处理程序。

＆＃13;

＆＃13;

$('input[name="service"]').click(function(event){
   $('input[name="service"]:checked').not(this).prop('checked', false);
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要保留两个表单标记，只需保留一个表单标记，并将整个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>

Answer 3

如果选择了第一个表单单选按钮，则可以禁用或隐藏第二个表单单选按钮

<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>