显示和隐藏有问题。如何解决这个问题？

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>