Question

我是新手，我需要得到所有帮助。当检查每个框时，这些段落应该消失。我在这里做错了什么？

的Javascript

function showPara() {
    document.getElementById("first").style.visibility=(document.formex.firstpara.checked) ? "visible" : "hidden";
    document.getElementById("second").style.visibility=(document.formex.secondpara.checked) ? "visible" : "hidden";
    document.getElementById("third").style.visibility=(document.formex.thirdpara.checked) ? "visible" : "hidden";
return true;        
}

HTML

<p id="first">This is the first paragraph</p>
<p id="second">This is the second paragraph</p>
<p id="third">This is the third paragraph</p>
<form name="formex">
<input type="checkbox" name="firstpara" onClick="showPara();" />First Paragraph<br />
<input type="checkbox" name="secondpara" onClick="showPara();" />Second Paragraph<br />
<input type="checkbox" name="thirdpara" onClick="showPara();" />Third Paragraph<br />
<p>&nbsp;</p>
</body>
</html>

Answer 1

你只需要反转“可见”和“隐藏”的位置，使其读取

? "hidden" : "visible";

如果你想默认隐藏段落，你也必须在body onload上运行该函数。或者，如果段落应该可见，您可以从复选框中删除checked属性。

http://jsfiddle.net/7U36x/5/

Answer 2

一项增强此任务难度的增强功能是更改name的{{1}}以匹配input的{{1}}。您可以在提供的HTML中看到此更改。另请注意，id会传递给附加到每个p的内联函数。

一旦进行了这个标记更改，Javascript就会变得不那么冗长。您只需使用this属性选择元素，然后根据input的值适当切换可见性。

<强>的Javascript

name

<强> HTML

checked

JS小提琴： http://jsfiddle.net/U5w2q/1/

Answer 3

使用showPara（）函数：

function showPara() {
    document.getElementById("first").style.visibility=(document.forms.formex.firstpara.checked ? "visible" : "hidden");
    document.getElementById("second").style.visibility=(document.forms.formex.secondpara.checked ? "visible" : "hidden");
    document.getElementById("third").style.visibility=(document.forms.formex.thirdpara.checked ? "visible" : "hidden");
}

问题在于您访问的元素为document.formex. ...而不是docuement.forms.formex. ...

您还将内联if语句的结束括号放在错误的位置。

你也应该关闭元素......

工作代码：http://jsfiddle.net/cjvD4/

Answer 4

您可以尝试更改HTML，如下所示 -

<input type="checkbox" name="firstpara" onClick="showPara(this, 'first');" />First Paragraph<br />
<input type="checkbox" name="secondpara" onClick="showPara(this, 'second');" />Second Paragraph<br />
<input type="checkbox" name="thirdpara" onClick="showPara(this, 'third');" />Third Paragraph<br />

你的javascript基金如下 -

function showPara(chkbox, paraid) {
if(chkbox.checked)
    document.getElementById("first").style.visibility == "visible";
else 
    document.getElementById("first").style.visibility == "hidden";
}

Answer 5

<p id="first">This is the first paragraph</p>
<p id="second">This is the second paragraph</p>
<p id="third">This is the third paragraph</p>
<form name="formex">
  <input type="checkbox" checked="true" style="visibility:visible"  name="firstpara" onClick="showPara('first', this);" />First Paragraph<br />
  <input type="checkbox" checked="true" style="visibility:visible"   name="secondpara" onClick="showPara('second', this);" />Second Paragraph<br />
  <input type="checkbox" checked="true" style="visibility:visible"   name="thirdpara" onClick="showPara('third', this);" />Third Paragraph<br />
</form>

<script>
function showPara(id, ck) {
    p = document.getElementById(id)
    if(ck.checked == true){
        p.style.visibility = 'visible'     
    }else{
       p.style.visibility = 'hidden'
    }    
  }
</script>

http://jsfiddle.net/XK97j/

javascript，消失的再现文本

5 个答案: