在复选框中选中或多选一项

  • Z时代
  • 2024-01-10
  • 分类：问答

我在表单中使用复选框。但是当一个复选框被选中时，显示detail div。当多重检查不显示与jQuery的div。在复选框中选中或多选一项

HTML代码：

<input type="checkbox" name="cb1" id="cb1" /> 
<input type="checkbox" name="cb2" id="cb2" /> 
<input type="checkbox" name="cb3" id="cb3" /> 
<input type="checkbox" name="cb4" id="cb4" /> 
<div id="detail" style="display:none"></div>

回答：

检查代码：

注：更换jQuery库路径

<html> 
<head> 
<title>Demo</title> 
<script src="js/jquery.min.js"></script> 
<script> 
    function checkIt(sender) { 
     if ($(".checkme:checked").length == 1) { 
      $("#detail").css({ 
       display:"block" 
      }); 
     } 
     else { 
      $("#detail").css({ 
       display: "none" 
      }); 
     } 
    } 
</script> 
</head> 
<body> 
<input type="checkbox" name="cb1" id="cb1" class="checkme" onchange="checkIt(this);"/> 
<input type="checkbox" name="cb2" id="cb2" class="checkme" onchange="checkIt(this);" /> 
<input type="checkbox" name="cb3" id="cb3" class="checkme" onchange="checkIt(this);" /> 
<input type="checkbox" name="cb4" id="cb4" class="checkme" onchange="checkIt(this);"/> 
<div id="detail" style="display: none">I am Here</div> 
</body> 
</html>

回答：

这里是你如何做到这一点。希望有所帮助。

<input type="checkbox" name="cb1" id="cb1" /> 
<input type="checkbox" name="cb2" id="cb2" /> 
<input type="checkbox" name="cb3" id="cb3" /> 
<input type="checkbox" name="cb4" id="cb4" /> 
<div id="detail" style="display:none">Box.</div>

的Javascript：

<script> 
    var count = 0; 
    $('input[type="checkbox"]').click(function() { 
     count = $('input[type="checkbox"]:checked').length; 
     if (count == 1) { 
      $('#detail').show(); 
     } else { 
      $('#detail').hide(); 
     } 
    }); 
</script>

回答：

如果我的理解是正确的，我认为你需要显示当只有1复选框被选中，而在其他情况下，它应该被隐藏？如果是这样，请试试看。

$("input[type='checkbox']").on('click',function(){ 
    var c=0; 
    $("input[type='checkbox']").each(function(){     
     if($(this).is(":checked")) 
      c++; 
    }); 
    (c==1) ? $("#detail").show() : $("#detail").hide(); 
});

以上是 在复选框中选中或多选一项 的全部内容， 来源链接： utcz.com/qa/264973.html

回到顶部