Question

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

Answer 1

好的，你的问题仍然不清楚，我会更新答案。但如果它在John Bupit的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/

Answer 2

正如其他人所说，你的要求并不清楚。不过，我认为这段代码可以满足您的需求。

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（）可以更优雅，但我会把它留给你。请记住，让它工作，做对，快速。

Answer 3

我正在玩你的代码。正如您所问，我已将3个代码段放在同一页面上，并且它的工作方式在我看来应该在您的提案中。

该页面始终加载了＆＃39; Item-3＆＃39;可见，因为＆＃39; checkBox3.onchange＆＃39;以这种方式启动元素，覆盖之前的“onchanges＆＃39;”所做的任何先前配置（即：在脚本的末尾＆＃39; checkBox3＆＃39;配置为未选中，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>

javascript代码单独工作但在同一页面上使用时失败

3 个答案: