我在jsfiddle中创建了以下代码，如果我选中复选框，div Nime应该被取消隐藏，反之亦然，但它没有发生，我做错了什么？
Code in JSfiddle:
HTML：
<label>Newspaper?</label>
<input type="checkbox" name="nieu" onclick="change()"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
使用Javascript：
function change(){
which = document.getElementById('nime');
if(which.style.display=="block"){
which.style.display="none";
}else{
which.style.display="block";
}
};
答案 0 :(得分：2)
你错过了if块中的返回。
function change(){
which = document.getElementById('nime');
if(which.style.display=="block"){
which.style.display="none";
return;
}
which.style.display="block"
}
答案 1 :(得分：2)
将the classList API 与Element.querySelector() API
一起使用
function change(){
which.classList.toggle('visibility');// toggle a given class each time we click on the element woth the name nieu
};
var which = document.querySelector('#nime'),// get element with ID=nime
//which = document.querySelector('[id=nime]'),
nieu = document.querySelector('[name=nieu]');// get element with name=nime
// add the click event to nieu
nieu.addEventListener("click", change, false).visibility{ /*this is our class to hide the element*/
display: none
}<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
与加载时的隐藏状态相同，只需添加类.visibility
function change(){
which.classList.toggle('visibility');
};
var which = document.querySelector('#nime'),
nieu = document.querySelector('[name=nieu]');
nieu.addEventListener("click", change, false).visibility{
display: none
}<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id=nime class=visibility>
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
替代javascript
你可以使用jquery让你的生活更轻松，但推荐使用JS
$('[name=nieu]').click(function(){
$('#nime').toggleClass("visibility")
}).visibility{
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
在加载时隐藏元素只需将类添加到其中
$('[name=nieu]').click(function(){
$('#nime').toggleClass("visibility")
}).visibility{
display: none
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime" class=visibility><!-- add class visibility-->
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
或者如果您不想添加css
Jquery方法
$('[name=nieu]').click(function(){
$('#nime').is(":visible") ? $('#nime').hide(): $('#nime').show()
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime" class=visibility><!-- add class visibility-->
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
javascript方法
function change(){
which.style.display == "none"? which.style.display = "block" : which.style.display = "none"
};
var which = document.querySelector('[id=nime]'),
nieu = document.querySelector('[name=nieu]');
nieu.addEventListener("click", change, false)<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
答案 2 :(得分：1)
if语句之后的内容总是会运行，因为函数不会因为if条件为真而停止。此外，您将值设置为block的语句具有double =＆＃39; s。它不应该。
if(which.style.display=="block"){
which.style.display="none";
} else {
which.style.display="block";
}
答案 3 :(得分：0)
在你的JSFiddle中，请改变你声明你的函数以使其成为全局的方式，或者将JS设置为No Wrap（在头部）。 （See this question for more info）
window.changing = function() { // }
初始帖子中的其他注释：当您将显示设置为阻止时，您有两个相同的符号，这不会设置值。用一个。此外，您需要在if语句中返回（或if / else），否则它将始终运行其余代码。
window.changing = function() {
which = document.getElementById('nime');
if(which.style.display=="block"){
which.style.display="none";
return; // otherwise the line below is always shown
}
which.style.display = "block"; ///// THIS LINE I EDITED
};
答案 4 :(得分：0)
首先，你需要在设置“display = none”时退出函数change（）或在“else”语句中包装“display = block”，否则它将设置“display = block”无论如何什么是以前的价值。
实际上，你当前没有在if（）之后设置“display = block”，因为你正在使用比较运算符（“==”）而不是赋值运算符（“=”）。
你的职能改变（）应该是：
function change(){
which = document.getElementById('nime');
if(which.style.display=="block") {
which.style.display="none";
return;
}
which.style.display="block";
};
或
function change(){
which = document.getElementById('nime');
if(which.style.display=="block") {
which.style.display="none";
}
else {
which.style.display="block";
}
};
答案 5 :(得分：0)
使用onchange事件和函数如下
function change(){
var which = document.getElementById('nime');
var display = window.getComputedStyle(which, null).getPropertyValue('display');
if(display == 'none') {
which.style.display = 'block';
return;
}
if (display == 'block') {
which.style.display = 'none';
return;
}
}
HTML
<label>Newspaper?</label>
<input type="checkbox" name="nieu" onchange="change()"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
答案 6 :(得分：0)
这只是一种仅使用css
的替代方案
#nime{display: none}
[name=nieu]:checked ~ #nime{display: block}<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>
删除<br/><br/>
#nime{display: none;clear: both}
[name=nieu]:checked + #nime{display: block}<label>Newspaper?</label>
<input type="checkbox" name="nieu">
<div id="nime">
<label>How?</label>
<select name="nime">
<option value="email">Email</option>
<option value="post">Post</option>
<option value="beide">Both</option>
</select>
</div>