Javascript 引导管理面板单选按钮隐藏和显示_Javascript_Jquery_Twitter Bootstrap_Radio Button

Javascript 引导管理面板单选按钮隐藏和显示

javascript jquery twitter-bootstrap

Javascript 引导管理面板单选按钮隐藏和显示,javascript,jquery,twitter-bootstrap,radio-button,Javascript,Jquery,Twitter Bootstrap,Radio Button,这是我正在使用的管理面板的链接，以引导为主题我试图添加一个单选按钮，隐藏并显示包含一些下拉列表的div。这是一张照片打开时显示下面的div，关闭时显示我最接近实现梦想的地方是，它起作用了，但单选按钮（单选按钮中的黑圈）不起作用，两个选项都没有选中，即使我想单击它们，它也会运行功能，但不会运行颜色这是我的密码 <form class="form-horizontal"> <div class="form-group"> <div class="

这是我正在使用的管理面板的链接，以引导为主题

我试图添加一个单选按钮，隐藏并显示包含一些下拉列表的

div

。这是一张照片

打开时显示下面的

div

，关闭时显示

我最接近实现梦想的地方是，它起作用了，但单选按钮（单选按钮中的黑圈）不起作用，两个选项都没有选中，即使我想单击它们，它也会运行功能，但不会运行颜色

这是我的密码

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-md-6">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Open
      </label>
    </div>
    <div class="col-md-6">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"> Closed
      </label>
    </div>
    <label for="openingHour" class="col-sm-2 control-label">From: </label>
    <div class="col-sm-10">
      <select class="form-control">
        <option>12:00 AM</option>
        <option>12:30 AM</option>
        <option>1:00 AM</option>
        <option>1:30 AM</option>
        <option>2:00 AM</option>
        <option>2:30 AM</option>
        <option>3:00 AM</option>
        <option>3:30 AM</option>
        <option>4:00 AM</option>
        <option>4:30 AM</option>
        <option>5:00 AM</option>
        <option>5:30 AM</option>
        <option>6:00 AM</option>
        <option>6:30 AM</option>
        <option>7:00 AM</option>
        <option>7:30 AM</option>
        <option>8:00 AM</option>
        <option>8:30 AM</option>
        <option>9:00 AM</option>
        <option>9:30 AM</option>
        <option>10:00 AM</option>
        <option>10:30 AM</option>
        <option>11:00 AM</option>
        <option>11:30 AM</option>
        <option>12:00 PM</option>
        <option>12:30 PM</option>
        <option>1:00 PM</option>
        <option>1:30 PM</option>
        <option>2:00 PM</option>
        <option>2:30 PM</option>
        <option>3:00 PM</option>
        <option>3:30 PM</option>
        <option>4:00 PM</option>
        <option>4:30 PM</option>
        <option>5:00 PM</option>
        <option>5:30 PM</option>
        <option>6:00 PM</option>
        <option>6:30 PM</option>
        <option>7:00 PM</option>
        <option>7:30 PM</option>
        <option>8:00 PM</option>
        <option>8:30 PM</option>
        <option>9:00 PM</option>
        <option>9:30 PM</option>
        <option>10:00 PM</option>
        <option>10:30 PM</option>
        <option>11:00 PM</option>
        <option>11:30 PM</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="closingHour" class="col-sm-2 control-label">To: </label>
    <div class="col-sm-10">
      <select class="form-control">
        <option>12:00 AM</option>
        <option>12:30 AM</option>
        <option>1:00 AM</option>
        <option>1:30 AM</option>
        <option>2:00 AM</option>
        <option>2:30 AM</option>
        <option>3:00 AM</option>
        <option>3:30 AM</option>
        <option>4:00 AM</option>
        <option>4:30 AM</option>
        <option>5:00 AM</option>
        <option>5:30 AM</option>
        <option>6:00 AM</option>
        <option>6:30 AM</option>
        <option>7:00 AM</option>
        <option>7:30 AM</option>
        <option>8:00 AM</option>
        <option>8:30 AM</option>
        <option>9:00 AM</option>
        <option>9:30 AM</option>
        <option>10:00 AM</option>
        <option>10:30 AM</option>
        <option>11:00 AM</option>
        <option>11:30 AM</option>
        <option>12:00 PM</option>
        <option>12:30 PM</option>
        <option>1:00 PM</option>
        <option>1:30 PM</option>
        <option>2:00 PM</option>
        <option>2:30 PM</option>
        <option>3:00 PM</option>
        <option>3:30 PM</option>
        <option>4:00 PM</option>
        <option>4:30 PM</option>
        <option>5:00 PM</option>
        <option>5:30 PM</option>
        <option>6:00 PM</option>
        <option>6:30 PM</option>
        <option>7:00 PM</option>
        <option>7:30 PM</option>
        <option>8:00 PM</option>
        <option>8:30 PM</option>
        <option>9:00 PM</option>
        <option>9:30 PM</option>
        <option>10:00 PM</option>
        <option>10:30 PM</option>
        <option>11:00 PM</option>
        <option>11:30 PM</option>
      </select>
    </div>
  </div>
</form>


打开
关闭
发件人：
上午12:00
上午12:30
凌晨1点
凌晨1:30
凌晨2点
凌晨2:30
凌晨三点
凌晨3:30
凌晨四点
上午4:30
上午五点
上午5:30
早上6点
上午6:30
上午7:00
上午7:30
上午8:00
上午8:30
上午9点
上午9:30
上午10:00
上午10:30
上午11:00
上午11:30
下午12:00
下午12:30
下午1:00
下午1:30
下午2:00
下午2:30
下午三点
下午3:30
下午四点
下午4:30
下午五点
下午5:30
下午六点
下午6:30
下午7:00
下午7:30
晚上八点
晚上8:30
晚上九点
晚上9:30
晚上10:00
晚上10:30
晚上11:00
晚上11:30
致：
上午12:00
上午12:30
凌晨1点
凌晨1:30
凌晨2点
凌晨2:30
凌晨三点
凌晨3:30
凌晨四点
上午4:30
上午五点
上午5:30
早上6点
上午6:30
上午7:00
上午7:30
上午8:00
上午8:30
上午9点
上午9:30
上午10:00
上午10:30
上午11:00
上午11:30
下午12:00
下午12:30
下午1:00
下午1:30
下午2:00
下午2:30
下午三点
下午3:30
下午四点
下午4:30
下午五点
下午5:30
下午六点
下午6:30
下午7:00
下午7:30
晚上八点
晚上8:30
晚上九点
晚上9:30
晚上10:00
晚上10:30
晚上11:00
晚上11:30

我删除了js，因为我不想让任何人感到困惑。我希望这会有帮助，不会引起太多麻烦

您是否尝试过使用数据切换？它干净简单

<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="collapse" data-target="#dropdowns"> Open
    </label>
</div>
<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" data-target="#dropdowns" checked> Closed
    </label>
</div>
<div id="dropdowns" class="collapse">
    <!-- section containing dropdown values -->
</div>


打开
关闭

您是否尝试使用数据切换？它干净简单

<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="collapse" data-target="#dropdowns"> Open
    </label>
</div>
<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" data-target="#dropdowns" checked> Closed
    </label>
</div>
<div id="dropdowns" class="collapse">
    <!-- section containing dropdown values -->
</div>


打开
关闭

这有帮助吗

html

<input type="radio" id="open" />open
<input type="radio" id="close" />close

    <div class="content">
      <P>
      Your stuff here
      </P>
    </div>

    <div class="content2">
      <P>
      Some other stuff
      </P>
    </div>

jQuery

$(document).ready(function(){
    $("#open").click(function(){
    $(".content").animate({height: "toggle"}, 500);
    $(".content2").hide();
  });
  $("#close").click(function(){
    $(".content").hide();
    $(".content2").animate({height: "toggle"}, 500);
  });
});

这有帮助吗

html

<input type="radio" id="open" />open
<input type="radio" id="close" />close

    <div class="content">
      <P>
      Your stuff here
      </P>
    </div>

    <div class="content2">
      <P>
      Some other stuff
      </P>
    </div>

jQuery

$(document).ready(function(){
    $("#open").click(function(){
    $(".content").animate({height: "toggle"}, 500);
    $(".content2").hide();
  });
  $("#close").click(function(){
    $(".content").hide();
    $(".content2").animate({height: "toggle"}, 500);
  });
});

查看此演示

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
    $('#open').attr('checked', true);
       $('#open').click(function() {
       if($('#open').is(':checked')) { $('#divId').removeClass('hidden');}
    });
     $('#close').click(function() {
       if($('#close').is(':checked')) { $('#divId').addClass('hidden');}
    });
    });
    </script>
    </head>
    <body>
     <input type="radio" id="open" name="admin"/>open
    <input type="radio" id="close" name="admin"/>close


        <div class="well" id="divId">     
          Some other stuff

        </div>
    </body>
    </html>


引导示例
$（文档）.ready（函数（）{
$（'open'）.attr（'checked'，true）；
$（“#打开”）。单击（函数（）{
if（$（'#open'）.is（':checked'）{$（'#divId'）.removeClass（'hidden'）；}
});
$（“#关闭”）。单击（函数（）{
if（$（'#close'）.is（':checked'））{$（'#divId'）.addClass（'hidden'）；}
});
});
打开
关闭
一些其他的东西

签出此演示

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
    $('#open').attr('checked', true);
       $('#open').click(function() {
       if($('#open').is(':checked')) { $('#divId').removeClass('hidden');}
    });
     $('#close').click(function() {
       if($('#close').is(':checked')) { $('#divId').addClass('hidden');}
    });
    });
    </script>
    </head>
    <body>
     <input type="radio" id="open" name="admin"/>open
    <input type="radio" id="close" name="admin"/>close


        <div class="well" id="divId">     
          Some other stuff

        </div>
    </body>
    </html>


引导示例
$（文档）.ready（函数（）{
$（'open'）.attr（'checked'，true）；
$（“#打开”）。单击（函数（）{
if（$（'#open'）.is（':checked'）{$（'#divId'）.removeClass（'hidden'）；}
});
$（“#关闭”）。单击（函数（）{
if（$（'#close'）.is（':checked'））{$（'#divId'）.addClass（'hidden'）；}
});
});
打开
关闭
一些其他的东西