【问题标题】:How to close the first opened radio button when other one selected using jquery?如何在使用 jquery 选择其他单选按钮时关闭第一个打开的单选按钮?
【发布时间】:2012-11-26 17:48:54
【问题描述】:

大家好,我正在处理 jquery,我有三个三个单选按钮,每个选择我需要选择三个 div 一次潜水,就像我为它提供了单独的 div 一样,当我选择了它会正确打开的 div 时,我需要像什么时候一样执行 我选择了另一个单选按钮首先打开的另一个单选按钮应该关闭并选择应该打开我该怎么做 这是我的代码,请帮我这样做

                         <form class="form-horizontal" id="zone"> 
                           <label class="control-label" for="Availability">Shipping Zone Type</label>
                <div class="controls">
                <label class="radio">
                    <input type="radio" class="regular-radio" name="radio-1-set" id="radio-1-1"><label for="radio-1-1"></label>
                    This shipping zone is based on one more countries
                    <span class="tooltip-demo"><a data-original-title="Tooltip on right" href="#" rel="tooltip" data-placement="right"><i class="icon-question-sign"></i> </a></span>

                </label>

                <div class="selectbox-bg selectbox-bg-sb3 pull-left " id="shippingZone" style="display:none">
               <select>
                  <option>Choose a Country</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
               </select>
               </div> 
                           <label class="radio">
                    <input type="radio" class="regular-radio" name="radio-1-set" id="radio-1-2"><label for="radio-1-2"></label>                     
                    This shipping zone is based on one more state or provinces
                    <span class="tooltip-demo"><a data-original-title="Tooltip on right" href="#" rel="tooltip" data-placement="right"><i class="icon-question-sign"></i> </a></span>
                 </label>
                   <div class="selectbox-bg selectbox-bg-sb3 pull-left " id="shippingzonecountry" style="display:none">
               <select>
                  <option>Choose a Country</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
               </select>
               </div>
                  <input type="radio" class="regular-radio" name="radio-1-set" id="radio-1-3"><label for="radio-1-3"></label>                    
                 This shipping zone is based on one more postal or ZIP codes
                        <span class="tooltip-demo"><a data-original-title="Tooltip on right" href="#" rel="tooltip" data-placement="right"><i class="icon-question-sign"></i> </a></span>
                </label>
                <div class="selectbox-bg selectbox-bg-sb3 pull-left " id="zipcode" style="display:none">
               <select>
                  <option>Choose a Country</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
               </select>
               </div>  
                         </form>  

在上面我有三个单选按钮和三个 div 我需要选择一个单选按钮,它应该打开 当我选择另一个打开的第一个时,它应该是关闭的,请帮我看看这个 sdtha

          thi is my jquery :as fpllows

                $(function () {
                 $("#radio-1-2").click(function () {
           $("#shippingzonestate").show('slow');
             });

          $("#radio-1-2").click(function () {
          $("#shippingzonestate").show('slow');
          $("#shippingzonecountry").show('slow');
           });

          $("#radio-1-3").click(function () {
         $("#zipcode").show('slow');
          $("#Product-Code-SKU").show('slow');
           });

我试过这样但是当我打开另一个应该关闭我怎么能这样做

【问题讨论】:

  • 适当地格式化你的代码

标签: jquery radio-button


【解决方案1】:

EDIT(常用功能)

function showhide(radioname)
{
    $("#shippingzonestate").hide('slow');
    $("#shippingzonecountry").hide('slow');
    $("#zipcode").hide('slow');
    $("#Product-Code-SKU").hide('slow');

   if(radioname=="one")
   {
     $("#shippingzonestate").show('slow');
   }
   if(radioname=="two")
   {
     $("#shippingzonestate").show('slow');
     $("#shippingzonecountry").show('slow');
   }
   if(radioname=="three")
   {
     $("#zipcode").show('slow');
     $("#Product-Code-SKU").show('slow');
   }
}


$(function () {
                 $("#radio-1-2").click(function () {
                       showhide("one");
             });

          $("#radio-1-2").click(function () {
                        showhide("two");
           });

          $("#radio-1-3").click(function () {
                        showhide("three");
           });
}); 

只需使用hide 方法

  $(function () {
             $("#radio-1-2").click(function () {
       $("#shippingzonestate").show('slow');
        $("#shippingzonecountry").hide('slow');
          $("#zipcode").hide('slow');
      $("#Product-Code-SKU").hide('slow');
         });

      $("#radio-1-2").click(function () {
      $("#shippingzonestate").show('slow');
      $("#shippingzonecountry").show('slow');
          $("#zipcode").hide('slow');
      $("#Product-Code-SKU").hide('slow')
       });

      $("#radio-1-3").click(function () {
     $("#zipcode").show('slow');
      $("#Product-Code-SKU").show('slow');
      $("#shippingzonestate").hide('slow');
      $("#shippingzonecountry").hide('slow');
       });

【讨论】:

  • 非常感谢@pranay rana 的回复,谢谢你
  • @shakil - 别忘了给答案投票,还有一件事你仍然可以通过创建通用函数以更好的方式修改此代码...
  • 我怎么能做普通的运行,你可以指导我
猜你喜欢
  • 2015-02-27
  • 1970-01-01
  • 1970-01-01
  • 2013-01-29
  • 1970-01-01
  • 2016-05-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多