javascript代码可以单独工作，但在同一页面上使用时会失败
javascript code works individually but fails when used on the same page
下面的3个代码段"on.change();"中的每一个都可以单独工作，但当它们都放在同一页上时，似乎会失败。我认为这与"this.checked"区域有关——这似乎只读最后一个elem3——任何建议都会令人惊叹寻找JS而不是jQuery
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
HTML如下；当选中复选框时，应该只显示与复选框相关的div。因此，如果第一个复选框被选中，那么该复选框及其包装器应该显示，如果所有4个都被选中，这4个应该显示。2、3等。未选择的应该隐藏同样，我的JS代码可以单独工作，但当我想在同一个页面上完成所有操作时，它们会失败
HTML
<div class="container" id="records" style="background-color:#fff">
<br/>
<div class="row" id="item1">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 1!</h1>
<p>Item 1 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<input type="checkbox" id="check1" name="sample[]"/> This is a checkbox1</label>
<br />
</div>
</div>
</div>
<div class="row" id="item2">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 2!</h1>
<p>Item 2 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check2" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item3">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 3!</h1>
<p>Item 3 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check3" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item4">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 4!</h1>
<p>Item 4 I'm a hidden div!</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check4" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p>
</div>
</div>
</div>
好的，你的问题还不清楚，我会更新答案。但如果它能像约翰·布皮特的那样正常工作https://jsfiddle.net/wz5sxehn/-您的问题是一个简单的逻辑错误，而不是代码错误。
这个JSFiddle和你的代码一样工作吗？
问题是你对每个元素都这样做：
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
对于每个复选框。其中一个会隐藏另一个，同时隐藏自己！
在对代码进行最小更改的情况下，可以随心所欲地运行此操作：https://jsfiddle.net/wz5sxehn/3/
使用HTML：https://jsfiddle.net/wz5sxehn/6/
正如其他人所提到的，您的需求并不明确。不过，我认为这个代码可以满足您的需要。
https://jsfiddle.net/6g0ows2g/
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1'),
elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2'),
elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3'),
elem4 = document.getElementById('item4'),
checkBox4 = document.getElementById('check4');
function updateOptions() {
document.getElementById("item1").style.display = "block";
document.getElementById("item2").style.display = "block";
document.getElementById("item3").style.display = "block";
document.getElementById("item4").style.display = "block";
}
function toggleBlocks(elem, checkBox) {
updateOptions();
checkBox.checked = false;
elem.style.display = "none";
}
checkBox.onchange = function () {
toggleBlocks(elem, checkBox);
};
checkBox2.onchange = function () {
toggleBlocks(elem2, checkBox2);
};
checkBox3.onchange = function () {
toggleBlocks(elem3, checkBox3);
};
checkBox4.onchange = function () {
toggleBlocks(elem4, checkBox4);
};
附带说明一下，每当您发现自己重复了很多类似的代码时，请将这些代码分组为一个函数并使用参数。我发现它有助于消除隐藏语法错误和逻辑错误的混乱。
updateOptions（）可以变得更优雅，但我将由您决定。记住，让它发挥作用，让它正确，让它快速。
我在玩你的代码。正如你所问的，我把这3个代码片段放在了同一页上，它的工作方式在我看来是你的提案中应该有的。。
页面加载时始终显示"Item-3"，因为"checkBox3.onchange"以这种方式启动元素，覆盖了以前"onchanges"所做的任何以前的配置
（即：在脚本末尾，"checkBox3"被配置为未选中，item3被配置为display=block，这使其可见）。
如果你想在页面加载中隐藏项目3，只需取消最后一行的注释：
//onload (document.getElementById("item3").style.display = "none");
AFAIK，我们应该避免以这种方式混合javascript和html
不管怎样，代码到了
我希望它能帮助（在firefox上测试）
<!DOCTYPE HTML>
<html><head><title>Javascript Test</title>
</head>
<body> <h3>Checkbox test</h3>
<form name="CheckBoxes">
<label for="check1">Checkbox 1</label>
<input type="checkbox" name="check1" Id="check1" tabindex="1"><br><br><br>
<label for="check2">Checkbox 2</label>
<input type="checkbox" name="check2" Id="check2" tabindex="2"><br><br><br>
<label for="check3">Checkbox 3</label>
<input type="checkbox" name="check3" Id="check3" tabindex="3"><br><br><br>
</form>
<p id="item1"> Item-1</p><p id="item2"> Item-2</p><p id="item3"> Item-3</p><p id="item4"> Item-4</p>
<script language="javascript">
var elem = document.getElementById('item1'),
// var elem2 = document.getElementById('item2'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
// var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
// var elem2 = document.getElementById('item2'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
//onload (document.getElementById("item3").style.display = "none");
</script>
</body>
</html>
相关文章：
- 如何获取不属于我项目的上一页的URL
- 如何在Facebook上的iframe应用程序中使后退按钮返回到上一页
- 使用Booklet Jquery插件，我如何验证最后一页是否显示
- 如何在一页网站中使用PHP重定向到一个页面
- Javascript并不是显示在每一页上
- 如何在一页上显示多个Highcharts图表
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- 如何为AngularJS制作智能表中第一页和最后一页的跳过按钮
- Bootstrap一页导航Fluid网站最小化问题
- 返回上一页时，Javascript仍处于活动状态
- 将jsp重定向到servlet，然后重定向到下一页
- 如何在重定向到asp.net中单击按钮的下一页之前应用javascript警报
- 传递表单值并移动到另一页
- 如何获取数组详细信息另一页
- 警报中的window.location必须重定向到上一页
- 一页签出在Magento版本1.7.0.2中不起作用
- 获取/保留上一页's具有SmoothState的URL
- 简单的一页水平滚动
- 翻开一页'的javascript变量更改为提要
- 记住下一页的段塞
