only one checkbox selected at a time in jquery -
i working on popup window website makes choose between options before logging it. deal trying apply jquery, function "one checkbox selected @ time".
i tried lot of different possibilities reason doesn't work on code.
here code:
<body> <header> <div class="titulo"> <img src="get_your.png" alt=""> </div> </header> <div class="container"> <article class="mf"> <div><img src="indetify.png" alt="" style="padding- bottom:40px;"></div> <div id="firstblock"> <div class="male"> <img src="sim_boy.png" alt=""><br> <input type="checkbox" id="chkbox100" onclick="toggle(this);" class="input_class_checkbox"><br> <img src="male.png" alt=""> </div> <div class="female"> <img src="sim_girl.png" alt=""><br> <input type="checkbox" id="chkbox121" onclick="toggle(this);" class="input_class_checkbox"><br> <img src="female.png" alt="" style="padding- top:4px;"> </div> </div> </article> <aside class="all"> <div style="margin-left:60px;"><img src="like.png" alt="" style="padding-bottom:40px;"></div> <div> <div class="all_one"> <img src="sim_boy.png" alt=""><br> <input type="checkbox" class="input_class_checkbox"><br> <img src="male.png" alt=""> </div> <div class="all_one"> <img src="sim_girl.png" alt=""><br> <input type="checkbox" class="input_class_checkbox"><br> <img src="female.png" alt="" style="padding-top:4px;"> </div> <div class="all_one"> <img src="bi_mf.png" alt=""><br> <input type="checkbox" class="input_class_checkbox"><br> <img src="both.png" alt=""> </div> </div> </aside> </div> <footer> <div class="button"> <img src="button1.png" alt=""> </div> </footer> <script> $('.input_class_checkbox').each(function(){ $(this).hide().after('<div class="class_checkbox" />'); }); $('.class_checkbox').on('click',function(){ $(this).toggleclass('checked').prev().prop('checked',$(this).is('.checked')) }); </script> </body> notice applied css checkbox , changed default ones others built. think problem,
.class_checkbox { width: 57px; height: 57px; background-image:url(input.png); } .class_checkbox.checked { background-image:url(checked_c.png); width:65px; height:59px; } because when try this
<body> <div> <input type="checkbox" class="example" /> <input type="checkbox" class="example" /> </div> <div> <input type="checkbox" class="example2" /> <input type="checkbox" class="example2" /> <input type="checkbox" class="example2" /> </div> </body> <script> $('input.example').on('change', function() { $('input.example').not(this).prop('checked', false); }); $('input.example2').on('change', function() { $('input.example2').not(this).prop('checked', false); }); </script> it works perfectly!!!! when apply code doesn't work , tried several codes...
use radio buttons instead. group selected groups "name":
<input type="radio" name="example" value="male"> male<br> <input type="radio" name="example" value="female"> female<br> <input type="radio" name="example" value="other"> other <input type="radio" name="example2" value="plane"> plane<br> <input type="radio" name="example2" value="car"> car<br> <input type="radio" name="example2" value="bus"> bus see: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
ps: radio buttons can styled checkboxes, if preferred layout...
Comments
Post a Comment