CODEWITHSUNDEEP
javascriptjquery
Daniel Williams
Daniel Williams

Reputation: 2317

Showing/hiding elements with checkbox

In my snippet I want clicking click me to make the text disappear, and a checkbox appear and be checked. This part works.

What I can't get working is unchecking the checkbox SHOULD make the checkbox hide and the click me text reappear, but the checkbox simply WON'T UNCHECK.

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";
}
.hidden {
display:none;
}
<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">

Upvotes: 0

Views: 71

Answers (4)

Bee
Bee

Reputation: 124

I think this is what you are looking for.

$('#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()
  }
})
.hidden {
  display: none;
}
<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">

Upvotes: 1

glqdlt
glqdlt

Reputation: 21

Here is an solution.

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

Upvotes: 1

PM.
PM.

Reputation: 1721

Answer given by @CertainPerformance makes sense and is the correct reason of the issue. An alternative solution like below works:

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

Check the jsFiddle here

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371233

You're re-checking the checkbox immediately with your $('#thecb').prop('checked',true);. Put it in the other section instead:

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";
}
.hidden {
display:none;
}
<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">

Upvotes: 1

Related Questions