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

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -