[英]How do you show/hide a div with Javascript?
I'm trying to use javascript to show/hide a div's content depending on which radio button is selected. 我正在尝试使用javascript显示/隐藏div的内容,具体取决于选中的单选按钮。 I have an onchange function that I use to change the the div content from one div to another, but it doesn't work.
我有一个onchange函数,可用于将div内容从一个div更改为另一个div,但是它不起作用。 If you can do this in jquery instead thats ok but im not that familiar with jquery so if you could update my jsfiddle with it I would be appreciativw :) Here is the JSFiddle: https://jsfiddle.net/markusbond/au77Ladg/ Any help is appreciated :)
如果您可以在jquery中执行此操作,那没关系,但是我对jquery不那么熟悉,所以如果您可以用它更新我的jsfiddle,我会很感激的:)这是JSFiddle: https ://jsfiddle.net/markusbond/au77Ladg/任何感谢您的帮助:)
JAVASCRIPT: JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").show;
document.getElementById("unpopulateCheckBoxes").hidden;
} else {
document.getElementById("unpopulateCheckBoxes").show;
document.getElementById("populateCheckBoxes").hidden;
}
}
HTML: HTML:
<form role="form">
<div class="row">
<!--this is the onchange call-->
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<!--this is the second radio button-->
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<!--this is the first changed div-->
</div>
<div class="row" id="populateCheckBoxes">
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
</div>
<!--this is the second changed div-->
<div class="row" id="unpopulateCheckBoxes"></div>
</form>
Example using JQuery FIDDLE 使用JQuery FIDDLE的示例
JavaScript 的JavaScript
$('input:radio[name=optradio]').change(
function(){
if (this.value == 'selectionTables') {
$("#unpopulateCheckBoxes" ).hide();
$("#populateCheckBoxes").show();
}
else {
$("#unpopulateCheckBoxes" ).show();
$("#populateCheckBoxes").hide();
}
}
);
Give your first radio button a value value="selectionTables"
给您的第一个单选按钮一个值
value="selectionTables"
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>
I hope I understood you correctly. 我希望我能正确理解你。
document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element
It is worth noting that you will not always want your element to be display:block;
值得注意的是,您将不会总是希望元素被
display:block;
. 。 There are many display options and you probably want to toggle back and forth based on how your element was originally shown.
显示选项很多,您可能想根据元素的原始显示方式来回切换。
or via jquery, thats what i would prefer: 或通过jQuery,多数民众赞成在我更喜欢:
function changeSelection() {
if ($("#selectionTables").attr("checked") {
$("#populateCheckBoxes").show();
$("#unpopulateCheckBoxes").hide();
} else {
$("#unpopulateCheckBoxes").show();
$("#populateCheckBoxes").hide();
}
}
This is the correct way 这是正确的方法
<script>
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
document.getElementById("unpopulateCheckBoxes").style.visibility = "visible";
} else {
document.getElementById("unpopulateCheckBoxes").style.visibility ="hidden";
document.getElementById("populateCheckBoxes").style.visibility = "visible";
}
}
</script>
You are using 您正在使用
document.getElementById("unpopulateCheckBoxes").hidden;
but you should 但是你应该
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
Hope this helps 希望这可以帮助
Problem is html does not supports show/hide
attribute. 问题是html不支持
show/hide
属性。 Try using style
attribute with display
property. 尝试将
style
属性与display
属性一起使用。 Also use checked
attribute to make default radio selection. 也可以使用
checked
属性进行默认的单选。
<input type="radio" name="optradio" id="selectionTables" checked='' />
function changeSelection() { var pop = "none", upop = "block"; if (document.getElementById("selectionTables").checked) { pop = "block"; upop = "none"; } document.getElementById("unpopulateCheckBoxes").style.display = upop; document.getElementById("populateCheckBoxes").style.display = pop; }
<form role="form"> <div class="row"> <!--this is the onchange call--> <div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()"> <!--this is the first radio button--> <label> <input type="radio" name="optradio" id="selectionTables" checked='' />Use Tables </label> <!--this is the second radio button--> <label> <input type="radio" name="optradio" id="selectionViews" />Use Views </label> </div> <!--this is the first changed div--> </div> <div class="row" id="populateCheckBoxes"> <div class="checkbox"> <label> <input type="checkbox" id="selectionCondition" />Condition </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionDistribution" />Distribution </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionProgram" />Program </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="selectionTreatment" />Treatment </label> </div> </div> <!--this is the second changed div--> <div class="row" id="unpopulateCheckBoxes"></div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.