Question

我想使用复选框来更改JavaScript中段落的可见性。我想在纯JavaScript中执行此操作，而不使用任何类似jQuery的库。此外，我想在JSFiddle中做到这一点。

我知道一个可行的解决方案是使用：document.formName.checkboxName.checked，如下所示：

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

但是这个解决方案在JSFiddle中不起作用。

我该怎么做？

Answer 1

试试这个..

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

HTML

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

JS

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

点击JSFiddle

Answer 3

您需要在init()的复选框上调用onclick函数{根据您提供的小提琴链接}：

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

JS就像：

function init() {

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

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

}

FIDDLE

Answer 4

您可以尝试仅使用CSS的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

复选框可以打开和关闭文本

5 个答案: