堆栈内存溢出
  繁体   English   中英

当我单击复选框时，我想使用Bootstrap和JavaScript显示或隐藏div

[英]when i click on checkbox then i want to show or hide a div using bootstrap and javascript

 原文  2015-07-23 10:25:33  1   3    javascript/ html

问题描述

 <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

首先，为您的复选框提供id ： 

<input value="" type="checkbox" onclick="Change()" id="India" />

然后添加id和style="visibility:hidden;" 到你的div像： 

<div id="div1"  style="visibility:hidden;"><p>blabla</p></div>

函数将是这样的： 

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

当然，您必须修改代码，但它可以解决您的问题

解决方案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

将整个代码编辑成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;   
            }

这是JSFIDDLE

编辑2：

更新了JSFIDDLE以在无包装体上加载js

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我想隐藏并在每次点击时显示div 如何显示使用JavaScript在动态复选框单击事件上隐藏div 我想从3复选框中选择一个复选框，如果没有选中则显示div在简单的javascript中隐藏div 当我单击 div 时如何隐藏/显示兄弟姐妹 div 当我单击使用附加的服务器端html编码中的第一个div时如何隐藏和显示另一个div 隐藏/显示div复选框，单击 当我单击按钮时，显示show div onclick jquery缓慢 单击锚点按钮时显示div并隐藏其他 如果HTML数据为空，我想隐藏div，如果不是，我想显示。 HTML JavaScript 我如何显示/隐藏 <td> 当单击使用javascript或jquery的复选框时？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM