我正在使用JQuery来隐藏添加输入,如果加载了复选框。它们是其中的六个,所以我使用了一个适用于所有它们的功能(即使它们的ID是唯一的。)它在首次选择时工作正常,但是当我选择其中一个显示选项时(点击后)页面重新加载其他数据。在重新加载期间,php检查“已检查”框并添加html以声明其已检查。但是.js看不到这个并且仍然隐藏子数据,除非我取消选中该框并重新检查它。
我尝试了一个文档加载来查找它,并将该函数的检查部分移动到check事件之外。
<script>
$(function() {
$('.hidden').hide();
$('.trigger').change(function() {
var hiddenId = $(this).attr("data-trigger");
if ($(this).is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
});
});
</script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>
我希望这看看是否首先检查复选框然后隐藏它,如果没有。
$(function() {
// listen for trigger changes
$('.trigger').change(function() {
updateView();
});
// on page load checks the trigger value and updates the view
updateView();
});
function updateView(){
var hiddenId = $('.trigger').attr("data-trigger");
if ($('.trigger').is(':checked')) {
$("#" + hiddenId).show();
} else {
$("#" + hiddenId).hide();
}
}
.hidden{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="boxed show1">
<h3>Strategy Choices</h3>
<input type="checkbox" name="repeatFromLastGame" value="1" checked="checked" data-trigger="hidden_fields_one" class="trigger"> Repeat Numbers from last Game?<br>
<div id="hidden_fields_one" class="hidden" style="display: none;">
<label for="numberRepeats">Number of Repeats from last game to use?</label><br>
<select name="numberRepeats">
<option value="0">0</option>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div><br>
<label for="chit1">Repeat 1</label><br>
<select name="chit1">
<option value="8">8</option>
<option value="38" selected="selected">38</option>
<option value="43">43</option>
<option value="52">52</option>
<option value="55">55</option>
</select>
</div>
</html>