javascript - Dynamically hide/show textboxs when a checkbox clicked -
after bit of jq research, updated question because upset some, rightly, hands-up! when checkbox clicked content of corresponding should visible , vice verse. how can it? thanks
jq:
$(document).ready(function(){ $('div.accessories div.acc-wrapper input:checkbox').click(function(event) { if($(this).prop('checked')) { $('div.accessories div.acc-wrapper div.field').show(); } else { $('div.accessories div.acc-wrapper div.field').hide(); } }); });
html:
<div class="accessories"> <div class="acc-wrapper"> <label>row 1</label> <input type="checkbox" id="cname_1" name="abc" value="1" /> <br /> <div class="field" style="display:none;"> <label>name</label> <input type="text" id="name_1" name="name" value="" /> <label>surname</label> <input type="text" id="surname_2" name="surname" value="" /> </div> </div> <div class="acc-wrapper"> <label>row 2</label> <input type="checkbox" id="cname_2" name="abc" value="1" /> <br /> <div class="field" style="display:none;"> <label>name</label> <input type="text" id="name_2" name="name" value="" /> <label>surname</label> <input type="text" id="surname_2" name="surname" value="" /> </div> </div> <div class="acc-wrapper"> <label>row 3</label> <input type="checkbox" id="cname_3" name="abc" value="1" /> <br /> <div class="field" style="display:none;"> <label>name</label> <input type="text" id="name_3" name="name" value="" /> <label>surname</label> <input type="text" id="surname_3" name="surname" value="" /> </div> </div> </div>
you may use jquery hide , show component on event using hide()
, show()
methods..!!!
for example:
$("#<your component id here>").click(function() { $('#<your component id here>').hide(); });
Comments
Post a Comment