javascript - Combining show/hide toggle with radio buttons AND checkboxes -

i can toggle show/hide of checkbox because can unchecked behavior different on radio group because clicking checked radio button doesn’t uncheck it, clicking radio button in same group.

demo works checkbox not radio groups

how can modify works radio buttons , checkboxes in same function? in example can click item4 doesn’t hide upon clicking others in radio group.

how should work: put data-info-id="infox" on input put id="infox" on container div

jquery solutions welcome.

html

    <input type="checkbox" id="item1" data-info-id="info1" />     <label for="item1">item 1 checkbox</label>     <br/>     <div id="info1">content checkbox group</div>     </p>     <input type="radio" id="jb1" name="jb" />     <label for="jb1">item2 radio</label>     <br/>     <input type="radio" id="jb2" name="jb" />     <label for="jb2">item3 radio</label>     <br/>     <input type="radio" id="jb3" name="jb" data-info-id="info2" />     <label for="jb3">item4 radio</label>     <br/>     <div id="info2">content radio group</div> 

css

[id^="info"] {             display: none;     } 

js

document.addeventlistener('change', function(e) {       var id = e.target.getattribute('data-info-id');       var checked = e.target.checked;       if (id) {         var div = document.getelementbyid(id);         if (div)           div.style.display = checked ? 'block' : 'none';       }      }); 

i first added 2 containing divs around checkbox , radio buttons:

<div id="checkbox">     <input type="checkbox" id="item1" data-info-id="info1" />     <label for="item1">item 1 checkbox</label> </div> <br/> <div id="info1">content checkbox group</div> </p> <div id="radios">     <input type="radio" id="jb1" name="jb" />     <label for="jb1">item2 radio</label>     <br/>     <input type="radio" id="jb2" name="jb" />     <label for="jb2">item3 radio</label>     <br/>     <input type="radio" id="jb3" name="jb" data-info-id="info2" />     <label for="jb3">item4 radio</label>     <br/> </div> <div id="info2">content radio group</div> 

i added loop loop through children of parent of item clicked. because triggering change event clicked item.

document.addeventlistener('change', function (e) {      var children = e.target.parentnode.children;       for(var = 0; < children.length ; ++)     {          var id = children[i].getattribute('data-info-id');         var checked = children[i].checked;          if (id) {             var div = document.getelementbyid(id);             if (div) div.style.display = checked ? 'block' : 'none';         }      }  }); 

this works me. it's little down , dirty works fine.