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>

我如何在jQuery中解决这个问题。根据用户选择，我想显示日期和时间表。
同样，如果用户选择星期一，星期二和星期三，我该如何显示日期和时间表

我的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的元素，例如：您的＆＃39; Fromtime＆＃39;和＆＃39; Totime＆＃39;选择框。

您要提交的所有数据都需要包含在<form>标记中。看起来你在这里有一个太多的结束标签会导致问题。

话虽如此，您可以通过以下内容实现显示/隐藏效果（我已经远离jQuery，因为这很简单）：

＆＃13;

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';
  }
}

＆＃13;

.hidden {
  display: none;
}

input[type=submit] {
  margin-top: 10px;
}

＆＃13;

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

＆＃13;

显示和隐藏有一些问题。怎么解决这个？

1 个答案: