Javascript 使用CSS选中/取消选中复选框时切换文本和文本框
在我的HTML程序中,我试图实现一个功能,其中有一个文本问题,“你今天锻炼了吗?”后跟一个复选框。如果复选框被选中是,我希望出现一个新行,询问“你锻炼了多长时间?”然后是一个文本框。 我现在有一个CSS可以实现我的目标,但是它只会切换文本框,以及你花了多长时间才完成。如何隐藏文本和文本框?以下是我的CSS代码:Javascript 使用CSS选中/取消选中复选框时切换文本和文本框,javascript,jquery,html,css,checkbox,Javascript,Jquery,Html,Css,Checkbox,在我的HTML程序中,我试图实现一个功能,其中有一个文本问题,“你今天锻炼了吗?”后跟一个复选框。如果复选框被选中是,我希望出现一个新行,询问“你锻炼了多长时间?”然后是一个文本框。 我现在有一个CSS可以实现我的目标,但是它只会切换文本框,以及你花了多长时间才完成。如何隐藏文本和文本框?以下是我的CSS代码: function $_(IDS) { return document.getElementById(IDS); } function toggle(Info) { var CState
function $_(IDS) { return document.getElementById(IDS); }
function toggle(Info) {
var CState = $_(Info);
if (CState.style.display != "none") { CState.style.display = "none"; }
else { CState.style.display = "inline"; }
}
function HideElem(IDS1, IDS2) {
toggle(IDS1);
toggle(IDS2);
}
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
下面是用HTML实现的:
Did you work out today? <div class="checkboxFour">
<input type="checkbox" value="1" onchange = "HideElem('share','meal')" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div>
<span id= "share">
</span> <br><br>How long did you work out? <input type="text" id="meal" name="meal" size="40" style="display:none;"
value="Example: 8.5 Hours" onfocus="inputFocus(this)" onblur="inputBlur(this)">
你今天锻炼了吗?
你锻炼了多长时间?
我还使用了一个样式化的复选框,如果它改变了事情的话。感谢您的帮助。您无法将css样式添加到文本节点(标题),因此请将标题和输入元素包装到另一个元素中,并将可见性应用到该包装元素
<input type="checkbox" value="1" onchange="HideElem('share','mean-ct')" id="checkboxInput" name="" />
然后
你锻炼了多长时间?
演示:用
span
标记将问题包装起来,并为其指定id
。尝试以下操作:
Html:
<span id="mean-ct" style="display:none;">
How long did you work out?
<input type="text" id="meal" name="meal" size="40" value="Example: 8.5 Hours" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
</span>
<span id="how" style="display:none;">How long did you work out? </span>
if (CState.style.display != "none") {
CState.style.display = "none";
document.getElementById("how").style.display = "none"; //hide the question
}
else {
CState.style.display = "inline";
document.getElementById("how").style.display = "inline"; //display the question
}