我正在尝试使用javascript来显示/隐藏div的内容,具体取决于所选的单选按钮。我有一个onchange函数,我用它来将div内容从一个div更改为另一个div,但它不起作用。如果你可以在jquery中这样做,那就好了,但我不熟悉jquery所以如果你可以用它来更新我的jsfiddle我会赞赏:)这是JSFiddle:https://jsfiddle.net/markusbond/au77Ladg/ 任何帮助表示赞赏:)
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:
<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>
答案 0 :(得分:2)
使用JQuery FIDDLE
的示例的JavaScript
$('input:radio[name=optradio]').change(
function(){
if (this.value == 'selectionTables') {
$("#unpopulateCheckBoxes" ).hide();
$("#populateCheckBoxes").show();
}
else {
$("#unpopulateCheckBoxes" ).show();
$("#populateCheckBoxes").hide();
}
}
);
为您的第一个单选按钮添加值value="selectionTables"
<!--this is the first radio button-->
<label>
<input type="radio" name="optradio" id="selectionTables" value="selectionTables" />Use Tables
</label>
我希望我能正确理解你。
答案 1 :(得分:1)
document.getElementById('myElementID').style.display = 'none'; // Will hide an element
document.getElementById('myElementID').style.display = 'block'; // Will show an element
值得注意的是,您并不总是希望您的元素为display:block;
。有许多显示选项,您可能希望根据元素最初显示的方式来回切换。
答案 2 :(得分:1)
或通过jquery,这就是我想要的:
function changeSelection() {
if ($("#selectionTables").attr("checked") {
$("#populateCheckBoxes").show();
$("#unpopulateCheckBoxes").hide();
} else {
$("#unpopulateCheckBoxes").show();
$("#populateCheckBoxes").hide();
}
}
答案 3 :(得分:1)
这是正确的方法
<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>
您正在使用
document.getElementById("unpopulateCheckBoxes").hidden;
但你应该
document.getElementById("populateCheckBoxes").style.visibility = "hidden";
希望这有帮助
答案 4 :(得分:1)
问题是html不支持show/hide
属性。尝试将style
属性与display
属性一起使用。还可以使用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>