Why are not checkboxes displayed in block mode ? - Javascript

Well this is not about CSS and this is about Javascript. As far as I know block mode display elements in a new line whereas inline mode display elements without starting a new line :Reference.

Please look at the below javascript It simply displays a set of checkboxes once a main checkbox is clicked. If not they are hidden.

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();

}

The code works fine. But I want you to focus on these few lines

if(mainCheck.checked){

displayResult.style.display="block";

            }

Even though display mode is block all my checkboxes appear inline when the main checkbox is clicked. Why is that? Any kind of explanation will be highly appreciated

Answers


The answer is simple: because checkbox is an inline element. And you are changing style.display property of the div, not individual checkboxes You said it in comment:

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

I suppose you have your checkboxes inside this div#showHide div.

http://jsfiddle.net/um5R5/


Need Your Help

ListFragment onListItemClick not called

android onclicklistener android-listfragment

I'm using a ListFragment (Not from support library). I have a SimpleCursorAdapter and I'm using android.R.layout.simple_list_item_2. Data shows up perfectly fine however I'm not receiving anything ...

What is the best approach to a "filter-fork"?

git github

I've used filter-branch in the past, but now I'm looking for a solution to expose a private repository's folder by forking it to allow me and others to create pull requests.