dsg435665475
2018-06-07 05:39
浏览 216
已采纳

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

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

This is what I have tried and I need to select only one radio buttons from either services. If one service from a package is selected the other package services shouldn't be selected.I have 6 other packages User should be able to select one at a time from these different sets of packages please help. TIA

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanji1482 2018-06-07 05:43
    已采纳

    Since the name is the same, I bind event handler on input and name.

    I don't know whether you use jQuery or not.

    For convenience I did it below by jQuery.

    Only thing I did is to add the event handler.

    $('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>

    </div>
    
    评论
    解决 无用
    打赏 举报
查看更多回答(2条)

相关推荐 更多相似问题