1
votes

afficher ou masquer div, dépendre d'une case à cocher

J'ai une case à cocher et sous la case à cocher une zone div, où je veux afficher une liste déroulante et une autre case à cocher. Cette zone que je veux juste montrer quand la première case est cochée.

Je l'ai déjà essayé avec style.display et cela fonctionne à moitié. Je peux afficher la deuxième zone lorsque je coche la case, mais si je décoche, elle ne se cache plus. Idem si j'essaye avec jquery (publié les deux)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-check-inline" style="font-size:20px">
  <input class="form-check-input big-checkbox" type="checkbox" id="tpe" value="tpe" onchange="functpe()">
  <label class="form-check-label" for="tpe">tpe</label>
</div>
<div id="doing" style="display:none">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="tpe" style="width: 170px;">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1">
    <label class="form-check-label" for="n1">n1</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked>
    <label class="form-check-label" for="n2">n2</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked>
    <label class="form-check-label" for="n3">n3</label>
  </div>
</div>

//function F2

function functpe() {

  var tpe = document.getElementById("tpe");


  if (tpe.checked == true) {
    document.getElementById("doing").style.display = "block";
  } else {
    document.getElementById("doing").style.display = "none";
  }
}


function functpe() {

  var tpe = $("#doing");


  if (tpe.checked == true) {
    $("#doing").css({
      "display": "block"
    });

  } else {
    $("#doing").css({
      "display": "block"
    });

  }
}

J'espère que quelqu'un a une idée pour moi

javascript jquery html css

4 commentaires

Comme vous avez marqué cette jquery: $ ("# doing"). Show (tpe.checked);

Comment déclenchez-vous functpe () ? Avez-vous vérifié la valeur de tpe.checked (console / alert / debug-step)? Est-ce toujours vrai ?

J'ai trouvé votre code dans l'édition - il fallait juste que la première ligne soit indentée avec 4 espaces ou plus.

Copie possible de jQuery Show-Hide DIV en fonction de la valeur de la case à cocher et Jquery Afficher / Masquer en fonction de l'état de la case à cocher et Comment afficher / masquer un élément dans les états cochés / non cochés à l'aide de jQuery? et Afficher / masquer avec la case à cocher à l'aide de jQuery et afficher / masquer l'objet en fonction de la sélection de la case à cocher

5 Réponses :

1
votes

Utilisez la méthode toggle fournie par l'API jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label for="hide">Hide</label>
<input id="hide" type="checkbox" checked/>

<p id="post">Now you see me</p>

$('#hide').on('click', function(e) {
  $('#post').toggle();
});

0 commentaires

1
votes

essayez comme ça avec JQuery Toggle

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check form-check-inline" style="font-size:20px">
  <input class="form-check-input big-checkbox initialOne" type="checkbox" id="tpe" value="tpe">
  <label class="form-check-label" for="tpe">tpe</label>
</div>
<div id="doing" style="display:none">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="tpe" style="width: 170px;">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1">
    <label class="form-check-label" for="n1">n1</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked>
    <label class="form-check-label" for="n2">n2</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked>
    <label class="form-check-label" for="n3">n3</label>
  </div>
</div>

$('.initialOne').change(function() {
  $('#doing').slideToggle();
})

0 commentaires

0
votes

veuillez vérifier le code ci-dessous pour basculer (afficher / masquer) div lorsque vous cliquez sur la case à cocher.

<div id="autoUpdate" class="autoUpdate">
    content
</div> 

<script>
    $(document).ready(function(){
        $('#checkbox1').change(function(){
            $('#autoUpdate').toggle()
         });
    });

0 commentaires

0
votes

Je viens d'essayer votre code et il semble fonctionner correctement:

https://jsfiddle.net/ h8nfx4g2 /

<div class="form-check form-check-inline" style="font-size:20px">
  <input class="form-check-input big-checkbox" type="checkbox" id="tpe" value="tpe" onchange="functpe()">
  <label class="form-check-label" for="tpe">tpe</label>
</div>
<div id="doing" style="display:none">
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="tpe" style="width: 170px;">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n1" value="n1">
    <label class="form-check-label" for="n1">n1</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n2" value="n2" checked>
    <label class="form-check-label" for="n2">n2</label>
  </div>
  <div class="form-check form-check-inline" style="font-size:20px">
    <input class="form-check-input big-checkbox" type="checkbox" id="n3" value="n3" checked>
    <label class="form-check-label" for="n3">n3</label>
  </div>
</div>

<script>
  function functpe() {

    var tpe = document.getElementById("tpe");


    if (tpe.checked == true) {
      document.getElementById("doing").style.display = "block";
    } else {
      document.getElementById("doing").style.display = "none";
    }
  }

</script>

Veuillez confirmer si vous rencontrez des erreurs dans la console?

0 commentaires

2
votes

Vous pouvez le faire uniquement avec du CSS. Il vous suffit de modifier un peu l'ordre pour faire de #doing un frère de la case à cocher;) Voici un exemple

.doing {
    display: none;
}
input[type=checkbox]:checked ~ .doing {
    display: block;
}

1 commentaires

Très bonne réponse! J'édite l'exemple de texte en ligne pour utiliser du CSS pur pour éviter tout besoin de traitement SASS. Le lien d'exemple Codepen.io utilise toujours SASS, si vous avez / voulez cela.