对表演和隐藏有一些问题.如何解决这个问题

Having some issue with show and hide. How to solve this?

本文关键字：问题 解决 何解决 隐藏 表演      更新时间：2024-04-09

我的表单：

<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>

正如@Jai所提到的，HTML有几个问题。首先，不能有多个具有相同ID的元素，例如："Fromtime"answers"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>

相关文章：