顯示和隱藏有問題。如何解決這個問題？

Question

我的表格：

<form name="test" action="" method="post"> 
    Day And Time Available:<br/> 
    <input type="checkbox" name="day[]" id="day1" value="monday" onclick="show();"/>Monday<br/> 
    <input type="checkbox" name="day[]" id="day2" value="Tuesday" onclick="show();"/>Tuesday<br/> 
    <input type="checkbox" name="day[]" id="day3" value="Wednesday" onclick="show();"/>Wednesday<br/> 
    <input type="checkbox" name="day[]" id="day4" value="Thursday" onclick="show();"/>Thursday<br/> 
</form> 

<p style="visibility:hidden" id="timing">Here I am maintain the form</p> 
    <input type="submit" name="submit" onclick="return valid();"/> 
</form> 

如果用戶已經選擇了星期一，星期二我想輸出是這樣的：

Monday 
From Time 
<select name="Fromtime" id="Fromtime"> 
    <option value="6Am">6Am</option> 
    <option value="7Am">7Am</option> 
    <option value="8Am">8Am</option> 
</select> 
To Time 
<select name="Totime" id="Totime"> 
    <option value="6Am">6Am</option> 
    <option value="7Am">7Am</option> 
    <option value="8Am">8Am</option> 
</select> 

Tuesday: 
From Time 
<select name="Fromtime" id="Fromtime"> 
    <option value="6Am">6Am</option> 
    <option value="7Am">7Am</option> 
    <option value="8Am">8Am</option> 
</select> 
To Time 
<select name="Totime" id="Totime"> 
    <option value="6Am">6Am</option> 
    <option value="7Am">7Am</option> 
    <option value="8Am">8Am</option> 
</select> 

1. 如何在jQuery中解決這個問題。基於用戶選擇我想顯示日期和時間表。
2. 同樣，如果用戶選擇週一，週二和週三我怎麼顯示的日期和時間格式

我的javascript：

<script type="text/javascript"> 
     function show() 
{ 
var flag = 0; 
for (var i = 1; i< 7; i++) 
{ 
if(document.getElementById("day"+i).checked) 
{ 
document.getElementById('Fromtime').style.visibility='visible'; 
document.getElementById('Totime').style.visibility='visible'; 
} 
} 
return true; 
} 
</script> 

Answer 1

由於@Jai提到，有一個與幾個問題你的HTML。首先，不能有多個具有相同ID的元素，例如：'Fromtime'和'Totime'選擇框。

希望提交的所有數據都需要用<form>標籤打包。看起來你在這裏有一個太多的閉合標籤會導致問題。

話雖這麼說，你可以實現與類似如下（我從jQuery的避之不及的東西，這個簡單的）顯示/隱藏效果：

function show(element) { 
 
    var day = element.value; // gets the value of checkbox, e.g: 'monday' 
 
    var timeElement = document.querySelector('.times-' + day); // finds correct times- element for day 
 
    
 
    if (element.checked) { 
 
    timeElement.style.display = 'block'; 
 
    } else { 
 
    timeElement.style.display = 'none'; 
 
    } 
 
}

.hidden { 
 
    display: none; 
 
} 
 

 
input[type=submit] { 
 
    margin-top: 10px; 
 
}

<form name="test" action="" method="post"> 
 
    <fieldset> 
 
    <legend>Day And Time Available:</legend> 
 
    <input type="checkbox" class="day" value="monday" onclick="show(this);"/>Monday<br/> 
 
    <input type="checkbox" class="day" value="tuesday" onclick="show(this);"/>Tuesday<br/> 
 
    </fieldset> 
 

 

 
    <div class="times-monday hidden"> 
 
    <p>Monday</p> 
 
    <label for="FromtimeMonday">From Time</label> 
 
    <select name="FromtimeMonday" id="FromtimeMonday"> 
 
     <option value="6Am">6Am</option> 
 
     <option value="7Am">7Am</option> 
 
     <option value="8Am">8Am</option> 
 
    </select> 
 

 
    <label for="TotimeMonday">To Time</label> 
 
    <select name="TotimeMonday" id="TotimeMonday"> 
 
     <option value="6Am">6Am</option> 
 
     <option value="7Am">7Am</option> 
 
     <option value="8Am">8Am</option> 
 
    </select> 
 
    </div> 
 

 
    <div class="times-tuesday hidden"> 
 
    <p>Tuesday</p> 
 
    <label for="FromtimeTueday">From Time</label> 
 
    <select name="FromtimeTueday" id="FromtimeTueday"> 
 
     <option value="6Am">6Am</option> 
 
     <option value="7Am">7Am</option> 
 
     <option value="8Am">8Am</option> 
 
    </select> 
 

 
    <label for="TotimeTueday">To Time</label> 
 
    <select name="TotimeTueday" id="TotimeTueday"> 
 
     <option value="6Am">6Am</option> 
 
     <option value="7Am">7Am</option> 
 
     <option value="8Am">8Am</option> 
 
    </select> 
 
    </div> 
 

 
    <input type="submit" name="submit" text="submit" /> 
 
</form>