Question

当选中页面上至少一个复选框时，我会使用这些脚本来显示div。

在页面加载时，不会选中所有复选框。如果用户选中一个，则显示隐藏的div。我为此使用了两个脚本。

第一个发现在http://api.jquery.com/checked-selector/

<script>
var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "#count" ).text( n + (n === 1 ? " is" : " zijn") + " aangevinkt!" );

};
countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );
</script>

第二个脚本显示隐藏的div #maak_deel

<script>
$( "input[type=checkbox]" ).on( "click", function() {
  $("#maak_deel").fadeIn();
  });

</script>

我有两个问题，因为我是新手。

1）如何在一个脚本中组合这两个（以使我的代码更干净）

2）如果用户检查一个（= div显示），我怎样才能使div #maak_deel隐藏但是然后下定决心并再次取消选中。现在没有任何反应，我希望div再次消失。我尝试过切换，但这会产生错误的效果。

非常感谢帮助我！

Answer 1

您可以在计数功能中包含隐藏和显示代码。

<script>
var countChecked = function() {
  var n = $( "input:checked" ).length; //n now contains the number of checked elements.
  $( "#count" ).text( n + (n === 1 ? " is" : " zijn") + " aangevinkt!" ); //show some text
  if(n == 0){
    $("#maak_deel:visible").fadeOut(); //if there are none checked, hide only visible elements
  } else {
    $("#maak_deel:hidden").fadeIn(); //otherwise (some are selected) fadeIn - if the div is hidden.
  }

};
countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );
</script>

这当然必须在加载DOM之后执行，因此要么在jQuery的结尾处包装，要么将代码包装在$（document）.ready（function（）{// code goes here;}）;

选中至少一个复选框时显示div，但取消选中最后一个复选框后隐藏

1 个答案: