jquery - Show/Hide DIV sections based on radio boxes -
i'm trying rework several forms , there several sections have typical "was xxxx required?" yes/no radio boxes. if choose yes want box below open requiring them enter more info. i'd use 1 jquery function if work each of rather separate function each question needing it.
i have question choose whether person involved employee or guest. lot of posts here able figure out hiding guest div until selected haven't figured out yet how same employee div, , found out need add 3rd set of questions vendor.
this working code shows guest section
$(document).ready(function() { $("div.desc").hide(); $("input[name$='victim']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#" + test).show(); }); }); along with
<p> involved in incident?     <input name="victim" type="radio" value="guest" required >guest <input name="victim" type="radio" value="employee" > employee <div id="guest" class="desc"> <p> questions here ... can point me along getting additional code working? tia
unclear mean.. if have div id of employee , 1 vendor , add vendor radio button.... code works fine....
$(document).ready(function() { $("div.desc").hide(); $("input[name$='victim']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#" + test).show(); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3> involved in incident? </h3> <p><label><input name="victim" type="radio" value="guest" required >guest </label></p> <p><label><input name="victim" type="radio" value="employee" > employee </label</p> <p><label><input name="victim" type="radio" value="vendor" > vendor</label></p> <div id="guest" class="desc"> <p><strong>guest</strong> questions here ...</p> </div> <div id="employee" class="desc"> <p><strong>employee</strong> questions here ...</p> </div> <div id="vendor" class="desc"> <p><strong>vendor</strong> questions here ...</p> </div>
Comments
Post a Comment