Div1 = Top 10 des listes div2 = Envoyer la sélection

Cherche des fonctionnalités qui n'auront pas de no. de contacts chacun avec une case à cocher lorsque la case à cocher cochée div2 doit être affichée sinon div1 devrait être affiché ... Je suis entièrement nouveau sur ce forum si mon qtn prête à confusion ci-dessous, c'est ce que j'ai réalisé jusqu'à présent ... http://jsfiddle.net/0p5cf4be/

Maintenant la case à cocher fonctionne comme une bascule, mais j'ai besoin de ce div2 pour afficher si une / plusieurs cases à cocher doivent rester à div2

Par défaut, il doit afficher div1

Si aucune case n'est cochée, il doit afficher div1

<script>
  x=false;
  function Check(){
    if(x){    
      document.getElementById("div1").style.display='inline';
      document.getElementById("div2").style.display='none';
      x=false;
    }
    else{
      document.getElementById("div1").style.display='none'; 
      document.getElementById("div2").style.display='inline';   
      x=true;    
    }
  }
</script>
<div>
  <a href="#" id="div1"> <h2>Top 10 Listings</h2> </a>
  <a href="#" id="div2" style="display:none"> <h2>Send Selected</h2> </a>
</div>
<div class="contacts">
  Contact 1<input type="checkbox" id="check" onclick="Check()">
  <br>
  Contact 2<input type="checkbox" id="check" onclick="Check()">
  <br>
  Contact 3<input type="checkbox" id="check" onclick="Check()">
</div>
0
vinay 15 juil. 2015 à 16:55

3 réponses

Meilleure réponse

Qu'en est-il de l'utilisation de jquery pour gérer l'état de div2 en fonction de l'état des cases à cocher:

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

<div>
  <a href="#" id="div1">
    <h2>Top 10 Listings</h2> </a>
  <a href="#" id="div2" style="display: none;">
    <h2>Send Selected</h2> </a>
</div>
<div class="contacts">
  Contact 1<input type="checkbox" id="check1">
  <br>
  Contact 2<input type="checkbox" id="check2">
  <br>
  Contact 3<input type="checkbox" id="check2">
</div>


<script>
  var allCheckboxes = $("input[type=checkbox]");

  allCheckboxes.click(
    function () {
      var showSendSelected = $("input[type=checkbox]:checked").length > 0;
      var sendSelectedLink = $("#div2");
      if (showSendSelected) {
        sendSelectedLink.show();
      } else {
        sendSelectedLink.hide();
      }
    }
  );
</script>
0
HashPsi 15 juil. 2015 à 14:10

Puisque vous avez marqué JQUERY, essayez ceci,

 function Check()
 {
    var y=$("input[type='checkbox']:checked").length; 
    if(y!=0)
    {
       document.getElementById("div2").style.display='inline';   
       document.getElementById("div1").style.display='none'; 
    }
    else
    {
       document.getElementById("div1").style.display='inline';
       document.getElementById("div2").style.display='none';   
    }
}

Lien violon: http://jsfiddle.net/0p5cf4be/11/

0
Varun 15 juil. 2015 à 14:16

Puisque vous avez utilisé la balise jQuery, utilisez un gestionnaire jQuery comme

jQuery(function($) {
  var $checks = $('.contacts input:checkbox').click(function() {
    var checked = $checks.is(':checked');
    $('#div1').toggle(!checked);
    $('#div2').toggle(checked);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <a href="#" id="div1"> <h2>Top 10 Listings</h2> </a>
  <a href="#" id="div2" style="display:none"> <h2>Send Selected</h2> </a>
</div>

<div class="contacts">
  Contact 1<input type="checkbox"/>
  <br/>
  Contact 2<input type="checkbox"/>
  <br/>
  Contact 3<input type="checkbox"/>
</div>

Sans jQuery, vous pouvez utiliser un compteur comme

var counter = 0;

function Check(el) {
  if (el.checked) {
    counter++;
  } else {
    counter--;
  }
  document.getElementById("div1").style.display = counter ? 'none' : 'block';
  document.getElementById("div2").style.display = counter ? 'block' : 'none';
}
<div>
  <a href="#" id="div1"> <h2>Top 10 Listings</h2> </a>
  <a href="#" id="div2" style="display:none"> <h2>Send Selected</h2> </a>
</div>

<div class="contacts">
  Contact 1<input type="checkbox" onclick="Check(this)"/>
  <br/>
  Contact 2<input type="checkbox" onclick="Check(this)"/>
  <br/>
  Contact 3<input type="checkbox" onclick="Check(this)"/>
</div>
0
Arun P Johny 15 juil. 2015 à 14:10