当我单击复选框时，我想使用Bootstrap和JavaScript显示或隐藏div
[英]when i click on checkbox then i want to show or hide a div using bootstrap and javascript
问题描述
<script type="javascript"> /* which function */ </script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Practical_5.View.Registration" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap</title> <link href="../Content/bootstrap.css" rel="stylesheet" /> </head> <body> <div style="background-color: red; font-size: x-large; font-weight: bold; text-align: center"><span>You are registering for Matrimony Meet "Matrimonial Get Together - Pune - 22-Aug-2015"</span></div> <form id="form1" runat="server"> <div class="container"> <div class="panel"> <div class="panel panel-default"> <div class="panel-heading"> <img src="../Images/BJS_Logo-hindi.png" alt="logo" style="height: 71px; width: 161px" /> <label class="pull-right" style="font-size: x-large">Register</label> </div> <div class="panel-body"> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="fname">First Name</label> <input type="text" class="form-control" id="fname" placeholder="First Name" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="mname">Middle Name</label> <input type="text" class="form-control" id="mname" placeholder="Middle Name" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="lname">Last Name</label> <input type="text" class="form-control" id="lname" placeholder="Last Name" /> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="sell">Gender</label> <select class="form-control" id="sel1"> <option>Select</option> <option>Male</option> <option>Female</option> </select> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="mnunber">Mobile Number</label> <input type="text" class="form-control" id="mnumber" placeholder="Mobile Number" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email" /> </div> </div> </div> <div class="row"> <div class="col-md-1"> <label>India</label> <div class="row"> <div class="col-md-1"> <div class="checkbox"> <label> <input type="checkbox" value="" />India</label> </div> </div> </div> </div> when i checked or select this checkbox then i want to show the div having id=div1. and when i unchecked or unselect the checkbox then i want show the div having id=div2 <div class="col-md-3"> <label>Address</label> <div class="form-group"> <textarea class="form-control" rows="5" id="address" placeholder="Address"></textarea> </div> </div> <div class="col-md-8"> <div id="div1" class="row"> <div class="col-md-6"> <div class="form-group"> <label for="state">State</label> <select class="form-control" id="State"> <option class="active">Select State</option> <option>Maharashtra</option> <option>Andhra Pradesh</option> <option>Gujrat</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="city">City</label> <select class="form-control" id="city"> <option class="active">Select city</option> </select> </div> </div> </div> when i select the option maharashtra in dropdown list having id state then i want display all the cities in maharashtra in another dropdown list having id city???? please help me <div id="div2" class="row"> <div class="col-md-6"> <div class="form-group"> <label for="state">State</label> <input type="text" class="form-control" id="Text2" placeholder="Enter State" /> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="city">City</label> <input type="text" class="form-control" id="Text3" placeholder="Enter City" /> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="zip">Country</label> <select class="form-control" id="Select1"> <option class="active">Select Country</option> <option>India</option> <option>US</option> <option>Singapore</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="zip">Zip</label> <input type="text" class="form-control" id="zip" placeholder="Enter Zip" /> </div> </div> </div> </div> </div> <%--<div class="col-md-4"> <div class="row"> </div> <div class="row"> </div> </div>--%> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label for="lid">Login ID</label> <input type="text" class="form-control" id="lid" placeholder="Login ID" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="pwd">Password</label> <input type="text" class="form-control" id="pwd" placeholder="Password" /> </div> </div> <div class="col-md-4"> <div class="form-group"> <label for="cpwd">Conform Password</label> <input type="text" class="form-control" id="cpwd" placeholder="Conform Password" /> </div> </div> </div> </div> <div class="panel-footer"> <div class="row"> <div class="col-md-5"></div> <div class="col-md-3"> <button type="button" class="btn btn-primary">Register Me!</button> <button type="button" class="btn btn-primary">Cancel</button> </div> <div class="col-md-4"></div> </div> </div> </div> </div> </div> </form> </body> </html> how i should do this. which function i should write in javascript?? please help me <!-- begin snippet: js hide: false -->
3 个解决方案
解决方案1
2 2015-07-23 10:35:10
First, give id to your checkbox : 
首先，为您的复选框提供id ：
<input value="" type="checkbox" onclick="Change()" id="India" />
Then add id and style="visibility:hidden;" 然后添加id和style="visibility:hidden;" to your div like : 到你的div像：
<div id="div1" style="visibility:hidden;"><p>blabla</p></div>
And the function would be something like this : 函数将是这样的：
<script type="text/javascript">
function Change() {
if ((document.getElementById('India').checked)) {
document.getElementById('div1').style.visibility="visible";
}
else {
document.getElementById('di1v').style.visibility="hidden";
}
}
</script>
Of course, you have to adapt the code but it would solve your problem 当然，您必须修改代码，但它可以解决您的问题
解决方案2
1 2015-07-23 11:01:23
<input value="" type="checkbox" onChange="toggleDiv()" />
<div id="Pakistan" style="display:none;"><p>ShowHide</p></div>
In your Javascript code
<script type="text/javascript">
function toggleDiv() {
// first check if display then hide otherwise show
if ((document.getElementById('Pakistan').style.display == 'none')) {
document.getElementById('Pakistan').style.display="block";
}
else {
document.getElementById('Pakistan').style.display="none";
}
}
</script>
解决方案3
1 2015-07-24 08:13:00
Editing the whole code into Javascript 将整个代码编辑成Javascript
/*Get the states and city in javascript. Its preferred over for easy Coding.*/
var states = [{"state":"Maharashtra","cities":["Andheri","Banda"]},{"state":"Andhra Pradesh","cities":["Hydreabad"]},{"state":"Gujrat","cities":["Surat"]}]
var country = document.getElementById("country");
var state = document.getElementById("State");
var city = document.getElementById("city");
var divOne = document.getElementById("div1");
var divTwo = document.getElementById("div2");
var stateslength = states.length;
/*Initialize the document */
(function(){
country.checked = false;
divOne.style.display="none";
var stateoptions = "<option value='' selected>Select a state</option>";
for(var i=0; i< stateslength;i++){
stateoptions =stateoptions+'<option value="'+states[i].state+'">'+states[i].state+'</option>';
};
state.innerHTML=stateoptions;
}());
function toggleCountry(){
alert("asdf");
if(country.checked){
divOne.style.display="block";
divTwo.style.display="none";
}
else{
divOne.style.display="none";
divTwo.style.display="block";
}
};
function getCity(){
for (i = city.length; i >=0; i--) {
city.remove(i);
}
var cityoptions = "<option value='' selected>Select a City</option>";
for(var i = 0; i < stateslength; i++){
if(states[i].state == state.value){
var totalCities = states[i].cities.length;
for(j= 0; j<totalCities; j++ ){
cityoptions = cityoptions + '<option value="'+states[i].cities[j]+'">'+states[i].cities[j]+'</option>';
}
break;
}
}
city.innerHTML=cityoptions;
}
Here is the JSFIDDLE 这是JSFIDDLE
Edit 2: 编辑2：
Updated JSFIDDLE to load js on no wrap-body 更新了JSFIDDLE以在无包装体上加载js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我想隐藏并在每次点击时显示div - I want to hide and show a div on every click
如何显示使用JavaScript在动态复选框单击事件上隐藏div - how to show hide a div on dynamic checkbox click event using javascript
我想从3复选框中选择一个复选框，如果没有选中则显示div在简单的javascript中隐藏div - i want select one checkbox from 3 checkbox and display div if none is seletced hide div in simple javascript
当我单击 div 时如何隐藏/显示兄弟姐妹 div - how to hide/show siblings div when i click on div
当我单击使用附加的服务器端html编码中的第一个div时如何隐藏和显示另一个div - How to hide and show another div when I click first div in server side html coding using append
隐藏/显示div复选框，单击 - hide / show div on checkbox click
当我单击按钮时，显示show div onclick jquery缓慢 - show hide div onclick jquery slowly when i click the button
单击锚点按钮时显示div并隐藏其他 - Show a div and hide other when i click on an anchor button
如果HTML数据为空，我想隐藏div，如果不是，我想显示。 HTML JavaScript - I want to hide div if html data is empty, I want to show if it is not. HTML JavaScript
我如何显示/隐藏 <td> 当单击使用javascript或jquery的复选框时？ - How can i show/hide <td> when clicked on checkbox using javascript or jquery?
相关标签