jquery - HTML/JavaScript - Populate radio button if checkbox is checked -
i'm trying write javascript code if of checkboxes in group selected, radio button should populated.
following code i'm working on:
<html> <head> <title>radio buttons , checkboxes</title> </head> <body> <form> <h3>radio buttons</h3> <input type="radio" name="radio1" id="radio1"> radio 1 <br> <input type="radio" name="radio2" id="radio2">radio 2 <br> <br> <h3>checkbox groups</h3> <h4><u>group 1</u></h4> <p align="center"><u>pd</u></p> <ul> <li><input type="checkbox" name="g1pd1">g1 pd1</li> <li><input type="checkbox" name="g1pd2">g1 pd2</li> </ul> <p align="center"><u>id</u></p> <ul> <li><input type="checkbox" name="g1id1">g1 id1</li> <li><input type="checkbox" name="g1id2">g1 id2</li> </ul> <h4><u>group 2</u></h4> <p align="center"><u>pd</u></p> <ul> <li><input type="checkbox" name="g2pd1">g2 pd1</li> <li><input type="checkbox" name="g2pd2">g2 pd2</li> </ul> <p align="center"><u>id</u></p> <ul> <li><input type="checkbox" name="g2id1">g2 id1</li> <li><input type="checkbox" name="g2id2">g2 id2</li> </ul> </form> </body> </html> here's want javascript do. if of checkboxes under pd section in groups 1 , 2 checked, radio button radio 1 should populated. similarly, if of checkboxes under id section in groups 1 , 2 selected, radio button radio 2 should populated.
if me write jquery or javascript code, helpful.
update
using @gibberish's answer, able write js code. following js code
<script> $('input:checkbox').click(function(){ var cc = this.classname; if (cc=="pdcb"){ $('#radio2').prop('checked',false); $('#radio1').prop('checked',true); }else if (cc=="idcb"){ $('#radio1').prop('checked',false); $('#radio2').prop('checked',true); } else { $('#radio1').prop('checked',false); $('#radio2').prop('checked',false); } }); </script> my new question how deselect both radio buttons if none of checkboxes aren't checked?
thanks in advance!
if assign distinct classnames 2 checkbox groups, easier determine do.
here code sample, both in stack code snippet, , jsfiddle demo (because easier fiddle around with)
$('input:checkbox').click(function(){ var cc = this.classname; if (cc=="pdcb"){ $('#radio2').prop('checked',false); $('#radio1').prop('checked',true); }else if (cc=="idcb"){ $('#radio1').prop('checked',false); $('#radio2').prop('checked',true); } });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <h3>radio buttons</h3> <input type="radio" name="radio1" id="radio1"> radio 1 <br> <input type="radio" name="radio2" id="radio2">radio 2 <br> <br> <h3>checkbox groups</h3> <h4><u>group 1</u></h4> <p align="center"><u>pd</u></p> <ul> <li> <input class="pdcb" type="checkbox" name="g1pd1">g1 pd1</li> <li> <input class="pdcb" type="checkbox" name="g1pd2">g1 pd2</li> </ul> <p align="center"><u>id</u></p> <ul> <li> <input class="idcb" type="checkbox" name="g1id1">g1 id1</li> <li> <input class="idcb" type="checkbox" name="g1id2">g1 id2</li> </ul> <h4><u>group 2</u></h4> <p align="center"><u>pd</u></p> <ul> <li> <input class="pdcb" type="checkbox" name="g2pd1">g2 pd1</li> <li> <input class="pdcb" type="checkbox" name="g2pd2">g2 pd2</li> </ul> <p align="center"><u>id</u></p> <ul> <li> <input class="idcb" type="checkbox" name="g2id1">g2 id1</li> <li> <input class="idcb" type="checkbox" name="g2id2">g2 id2</li> </ul> </form>
Comments
Post a Comment