显示一个 div 并隐藏另一个 div onclick 复选框列表

Question

div1 = 前 10 个列表 div2 = 发送选中

我正在寻找将没有的功能。当必须显示复选框时，每个联系人都有一个复选框 div2 必须显示，否则必须显示 div1 ...如果我的 qtn 令人困惑，我对这个论坛来说是全新的对不起，下面是我到目前为止所取得的成就... http://jsfiddle.net/0p5cf4be/

现在复选框用作切换但是如果 one/multiple 复选框被选中，我需要显示 div2 它应该保持在 div2

默认情况下它应该显示 div1

如果没有复选框被选中，那么它必须显示 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>

Answer 1

既然你已经标记了 JQUERY 试试这个，

 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';   
    }
}

Fiddle link : http://jsfiddle.net/0p5cf4be/11/

Answer 2

使用 jquery 根据复选框的状态管理 div2 的状态怎么样：

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

Answer 3

由于您使用了 jQuery 标签，请使用 jQuery 处理程序，例如

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>

没有jQuery，你可以使用像

这样的计数器

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>

显示一个 div 并隐藏另一个 div onclick 复选框列表

show one div and hide another div onclick of list of checkboxes

javascript

checkbox

jquery

toggle