javascript - 每次单击复选框时，弹出窗口都会一致显示

Question

功能

当用户单击复选框时，将显示带有文本的 POPUP 图像，当用户单击取消按钮时，POPUP 图像将淡出，复选框仍将被选中。

问题

当我取消选中时，将显示带有文本的 POPUP 图像。

正确行为

1.) 用户选中该复选框，应显示带有文本的 POPUP 图像。当用户单击关闭按钮时，POPUP 应淡出。

2.) 复选框仍应处于选中状态。

3.) 当用户取消选中该复选框时，带有文本的 POPUP 图像不应淡入。

当前行为

1.) 用户选中该复选框，将显示带有文本的弹出图像。当用户单击关闭按钮时，弹出窗口会淡出。

2.) 该复选框仍将被选中。

3.) 当用户取消选中该复选框时，将显示带有文本的 POPUP 图像。

代码:

function Minimise() {

  idleTime = 0;


  $('#POPUP_PDPA').fadeOut();
}

$('#AcknowledgeField').click(function() {


  $('#POPUP_PDPA').fadeIn();
});

<input type="checkbox" id="AcknowledgeField" style="z-index=4; position:absolute; top:695px; left:227px; height:45px; width:45px; outline=0; border: 0; background: transparent;">


<div id="POPUP_PDPA" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=99; top:0px; margin:auto;">

  <img id="main_PopUp" src="lib/image/PopUp.png" style="position:absolute; top:750px; left:57px; z-index:80; margin:auto;" />

  <div id="PDPA" class="ContainerPDPAText">
    <div id="Scrolling" class="PDPAinnerScroll">
      <p><font face="HelveticaNeueLTStd" color="blue">1.) I email ...</font>
      </p>
      <p><font face="HelveticaNeueLTStd" color="blue">2.) By submitting this form, I agree to ....</font>
      </p>
    </div>
  </div>
  <button class="MinimiseButton" onclick="Minimise()"></button>
</div>

Answer 1

您可以添加一个变量“clicked”，并根据语句将其设置为 true 或 false。例如:

var clicked = false
$('input:checkbox').on('click', function() {
if(!clicked) {
  clicked = true
} else {
  clicked = false
  console.log('I have been clicked! Now on my next click I shall be set to false and so on')
}