css 取消文本选择状态,使用CSS选中/取消选中复选框时切换文本和文本框

在我的HTML程序中，我正在尝试实现一个功能，其中有一个文本问题，“你今天工作了吗？”然后是一个复选框。如果选中复选框是，我想要出现一个新行，询问“你工作了多长时间？”然后是文本框。

我目前有CSS实现了我的目标，但它只切换文本框，你有多长时间不断显示。如何将文本与文本框一起隐藏？这是我的CSS代码：

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?

How long did you work out?

value="Example: 8.5 Hours" οnfοcus="inputFocus(this)" οnblur="inputBlur(this)">

我也在使用程式化的复选框，如果这会改变一些事情。谢谢你的帮助。