Question

在我的代码段中，我想点击click me以使文字消失，然后会出现一个复选框并进行检查。这部分有效。

我无法正常工作取消选中复选框应该隐藏复选框并重新显示click me文字，但复选框只是WON＆＃39; T UNCHECK。

＆＃13;

function doStuff() { 
  if ($('#thecb').prop('checked') == true) {
    hideDiv('thecb');
    showDiv('thediv');
  } else {
    hideDiv('thediv');
    showDiv('thecb');
    $('#thecb').prop('checked',true);
  }
}

function showDiv(id) {
  document.getElementById(id).style.display = "block";
}

function hideDiv(id) {
  document.getElementById(id).style.display = "none";
}

＆＃13;

.hidden {
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thediv" onclick="doStuff()">click me</div>
<input type="checkbox" id="thecb" onclick="doStuff()" class="hidden">

＆＃13;

Answer 1

您需要立即使用$('#thecb').prop('checked',true);重新选中该复选框。把它放在另一部分中：

＆＃13;

function doStuff() { 
  if (!$('#thecb').prop('checked')) {
    hideDiv('thecb');
    showDiv('thediv');
    $('#thecb').prop('checked', true);
  } else {
    hideDiv('thediv');
    showDiv('thecb');
  }
}

function showDiv(id) {
  document.getElementById(id).style.display = "block";
}

function hideDiv(id) {
  document.getElementById(id).style.display = "none";
}

＆＃13;

.hidden {
display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thediv" onclick="doStuff()">click me</div>
<input type="checkbox" checked id="thecb" onclick="doStuff()" class="hidden">

＆＃13;

Answer 2

我认为这就是你要找的东西。

＆＃13;

$('#thediv').click(function() {
  showDiv('thecb');
  $(this).hide();
});

function showDiv(id) {
  document.getElementById(id).style.display = "block";

}

$('#thecb').change(function() {

  if (this.checked) {
    //do something on check

  } else {
    $('#thediv').show();
    $('input').hide()
  }
})

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="thediv">click me</div>
<input type="checkbox" id="thecb" class="hidden">

＆＃13;

Answer 3

这是一个解决方案。

<body>


<div id="thediv" onclick="doStuff()">click me</div>
<input type="checkbox" id="thecb"  class="hidden" checked="checked">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){
        var checkBox = $("#thecb");
        checkBox.change(function(){
            if(checkBox.is(":checked")){
                // Some checked event..
                alert('Checked.');
            }else{
                doStuff();
            }
        });
    });

   function doStuff(){
       $("#thediv").toggle();
       $("#thecb").toggle();
   }

</script>
</body>

Answer 4

@CertainPerformance给出的答案是有道理的，也是问题的正确原因。下面的替代解决方案有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
function doStuff(triggeringElement) { 
  if (triggeringElement == 'cb') {
    hideDiv('thecb');
    showDiv('thediv');
  } else {
    hideDiv('thediv');
    showDiv('thecb');
    $('#thecb').prop('checked',true);
  }
}

function showDiv(id) {
  document.getElementById(id).style.display = "block";
}

function hideDiv(id) {
  document.getElementById(id).style.display = "none";
}
</script>

<div id="thediv" onclick="doStuff('div')">click me</div>
<input type="checkbox" id="thecb" onclick="doStuff('cb')" class="hidden">

检查jsFiddle here

用复选框显示/隐藏元素

4 个答案: