在页面重新加载隐藏功能忽略已检查的输入,仅适用于单击

问题描述 投票:0回答:1

我正在使用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>

我希望这看看是否首先检查复选框然后隐藏它,如果没有。

javascript jquery html
1个回答
1
投票

$(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>
© www.soinside.com 2019 - 2024. All rights reserved.