Question

我正在使用JQuery根据是否已加载复选框来隐藏其他输入。它们只有六个，所以我使用了一个对所有人都适用的函数（即使它们的ID是唯一的）。首次选择它们时效果很好，但是当我选择“显示”选项之一（单击后）时，页面会重新加载其他数据。在此重新加载过程中，PHP会检查“已检查”框，并添加HTML来声明已选中。但是，.js看不到它，并且仍然隐藏子数据，除非我取消选中该框并重新选中它。

我尝试了一个文档加载来查找它，并将函数的check部分移到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>

我想让它查看是否首先选中了该复选框，然后将其隐藏。

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

在页面上重新加载隐藏功能将忽略选中的输入，仅在单击时有效

1 个答案: