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

【问题标题】：Why are not checkboxes displayed in block mode ? - Javascript为什么在块模式下不显示复选框？ - Javascript
【发布时间】：2014-02-06 14:58:56
【问题描述】：

这不是关于 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";

            }

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

【问题讨论】：

您不能更改某些元素的某些样式（例如复选框和下拉列表）。如果你谷歌样式的复选框，你会看到有很多 js 插件可以帮助实现“样式”复选框，而实际上你所做的只是设置标签的样式

标签： javascript html css checkbox

【解决方案1】：

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

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

我想你在这个 div#showHide div 中有你的复选框。

http://jsfiddle.net/um5R5/

【讨论】：

是的，你是对的。这是我的错。这是我应用样式的 div。顺便说一句，感谢您的澄清:)