Dans mon extrait, je veux cliquer sur click me pour faire disparaître le texte, et une case à cocher apparaîtra et sera cochée. Cette partie fonctionne.

Ce que je ne peux pas faire, c'est de décocher la case DEVRAIT faire masquer la case à cocher et le texte click me réapparaître, mais la case à cocher NE SERA PAS DÉCOCHER.

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">
0
Daniel Williams 13 avril 2018 à 04:17

4 réponses

Meilleure réponse

La réponse donnée par @CertainPerformance est logique et est la raison correcte du problème. Une solution alternative comme ci-dessous fonctionne:

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

Consultez le jsFiddle ici

0
PM. 13 avril 2018 à 01:37

Je pense que c'est ce que vous recherchez.

$('#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">
1
Bee 17 avril 2018 à 00:10

Vous revérifiez immédiatement la case à cocher avec votre $('#thecb').prop('checked',true);. Mettez-le à la place dans l'autre section:

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">
1
CertainPerformance 13 avril 2018 à 01:37

Voici une 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>
1
glqdlt 13 avril 2018 à 01:52