复选框，用于打开和关闭文本

Question

I want to use a checkbox to change the visibility of a paragraph in JavaScript. I would like to do this in pure JavaScript and not use any librararies like jQuery. Furthermore, I would like to do it in JSFiddle.

I know that one viable solution is to use: document.formName.checkboxName.checked like so:

 function show { 
    document.getElementById("paragraphName").style.visibility=(document.formName.checkboxName.checked) ? "visible" : "hidden";
 }

but this solution does not work in JSFiddle.

How do I go about doing this?

Answer 1

try this..

window.onload = function init() {
  checkbox = document.getElementById("checkbox1");
  checkbox.checked = true;
  checkbox.onchange = function(){
     document.getElementById("first").style.display = checkbox.checked?'block':'none';
  }
}    

Answer 2

The HTML

<label><input id="chk1" name="chk1" type="checkbox" onclick="nhamnham()"/>Hide p</label>
<p id="par">Text in the paragraph...</p>

The JS

function nhamnham() {
   if(document.getElementById("chk1").checked) {     
       document.getElementById("par").style.visibility="hidden";
   } else {
       document.getElementById("par").style.visibility="visible";
   }
}

Check here on JSFiddle

Answer 3

You need to call the init() function{as per the fiddle link you provided} on onclick of checkbox:

<form name="formex">
<input id="checkbox1" type="checkbox" name="firstpara" onclick="init();" />First paragraph<br/>
</form>
<p id="first">This is a paragraph</p>

And JS be like:

function init() {

if(document.getElementById("checkbox1").checked === false) {   
    document.getElementById("first").style.display = 'none';
}

else
  document.getElementById("first").style.display = 'block'; 

}

FIDDLE

Answer 4

You can try a CSS-only solution:

 #toggler ~ #toggler-target { display: none; } #toggler:checked ~ #toggler-target { display: block; } 

 <input type="checkbox" id="toggler" /> <label for="toggler">Toggle</label> <p id="toggler-target">Foo bar baz</p> 

Answer 5

 var par = document.getElementById('par'); document.getElementById('chk1').addEventListener('change', function() { par.style.visibility = this.checked ? "hidden" : "visible"; }); 

 <label><input id="chk1" name="chk1" type="checkbox">Toggle</label> <p id="par">Text in the paragraph...</p>