Question

这不是关于CSS而是关于Javascript。据我所知，块模式显示新行中的元素，而内联模式显示元素而不开始新行：Reference。

请看下面的javascript 只需单击一个主复选框，它就会显示一组复选框。如果不是，他们就被隐藏了。

function prepareEventHandlers(){
//This is the main checkbox
var mainCheck=document.getElementById("mainCheck");

//This is the corresponding div
var displayResult=document.getElementById("showHide");


    mainCheck.onchange=function(){

    //check whether the state of the checkbox is checked or not
        if(mainCheck.checked){
        //if it is checked the div is displayed
            displayResult.style.display="block";

        }
        else{
        //if it is not clicked div is not displayed
            displayResult.style.display="none";

        }



    };
//div is set to not to display in the initial page load
     displayResult.style.display="none";

}


//prepareEventHandlers() will be executed once the page is loaded.
window.onload=function(){
prepareEventHandlers();

}

代码工作正常。但我希望你专注于这几行

if(mainCheck.checked){

displayResult.style.display="block";

            }

即使显示模式为阻止，单击主复选框时，所有复选框也会显示为内嵌。这是为什么？任何形式的解释都将受到高度赞赏

Answer 1

答案很简单：因为checkbox是一个内联元素。而且您正在更改style.display的{{1}}属性，而不是单个复选框。您在评论中说了这个：

div

我想你在//div is set to not to display in the initial page load displayResult.style.display = "none"; div。

中有你的复选框

http://jsfiddle.net/um5R5/

为什么在块模式下不显示复选框？ - Javascript

1 个答案: