Show hide div if checkbox selected

Question

I need a page with checkboxes and visible div if at minimum 1 is checked   Here I got page that if i check checkbox   the div will show  It s okay and works correctly    When I check 3 checkboxes and uncheck 1  the div is missing  when i check some box again  the div will show - it isn t correct    How do I need modify the script to show all time the div  if at minimum 1 checkbox is checked  without this  jumping     lt html gt   lt head gt   lt title gt CB Hide Show lt  title gt   lt script type  text javascript  gt   lt  -- function showMe  it  box      var vis    box checked     block     none     document getElementById it  style display   vis      -- gt   lt  script gt   lt  head gt   lt body gt   lt h3 align  center  gt  This JavaScript shows how to hide divisions  lt  h3 gt    lt div id  div1  style  display none  gt   lt table border 1 id  t1  gt   lt tr gt   lt td gt i am here  lt  td gt   lt  tr gt   lt  table gt   lt  div gt    lt form gt   lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1   this   gt Show Hide Checkbox     lt  form gt   lt  body gt   lt  html gt

User · Accepted Answer

change the input boxes like   lt input type  checkbox  name  c1  onclick  showMe  div1    gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1    gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1    gt Show Hide Checkbox  lt input type  checkbox  name  c1  onclick  showMe  div1    gt Show Hide Checkbox   and js code as  function showMe  box         var chboxs   document getElementsByName  c1        var vis    none       for var i 0 i lt chboxs length i               if chboxs i  checked            vis    block               break                      document getElementById box  style display   vis        here is a demo fiddle

User · Answer

You would need to always consider the state of all checkboxes   You could increase or decrease a number on checking or unchecking  but imagine the site loads with three of them checked   So you always need to check all of them    lt script type  text javascript  gt   lt  -- function showMe  it  box         consider all checkboxes with same name   var checked   amountChecked box name      var vis    checked  gt   3     block     none     document getElementById it  style display   vis     function amountChecked name      var all   document getElementsByName name         count checked   var result   0    all forEach function el        if  el checked  result             return result      -- gt   lt  script gt

User · Answer

lt input type  checkbox  name  check1  value  checkbox  onchange  showMe  div1      gt  checkbox   lt div id  div1  style  display none   gt NOTICE lt  div gt      lt script type  text javascript  gt   lt  --    function showMe  box        var chboxs   document getElementById  div1   style display      var vis    none           if chboxs   none             vis    block             if chboxs   block             vis    none         document getElementById box  style display   vis        -- gt   lt  script gt

[javascript] Show/hide div if checkbox selected

Examples related to javascript

Examples related to jquery

Examples related to dom-events