jquery - Trying to hide/show divs on radio button clicks -
i'm trying hide , show different divs depending on radio button people click on.
jquery loading fine, i've tried putting alert on page load.
very similar code, selector methods etc have worked on page in same directory same includes on same server
the input box code is:
<label class="radio"><input type="radio" name="input_sandwich_choice" value="panini">panini</label> <label class="radio"><input type="radio" name="input_sandwich_choice" value="sandwich">sandwich</label> <label class="radio"><input type="radio" name="input_sandwich_choice" value="baguette">baguette</label> the divs are:
<div id="div_bread_options" class="collapse span3"> <!--2.2--> <h4>which bread like?</h4> <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">white</label> <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">brown</label> <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">granary</label> <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label> </div> <!--2.2--> <div id="div_butter_options" class="collapse span3"> <!--2.3--> <h4>would butter?</h4> <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="yes">yes</label> <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="no">no</label> <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label> </div> <!--2.3--> and jquery is:
<script> $("input[name=input_sandwich_choice]").click(function() { var checkedvalue = $("input[name='input_sandwich_choice']:checked").val(); console.log(checkedvalue); if (checkedvalue == "panini") { $("#div_bread_options").collapse('hide'); $("#div_butter_options").collapse('show'); } else if (checkedvalue == "sandwich") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else if (checkedvalue == "baguette") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else { alert("oops."); } }); </script> just can't figure why doesn't work... appreciated! thanks
so if have in header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
the can use anywhere after this:
$(document).ready(function() { $("input[name=input_sandwich_choice]").click(function() { var checkedvalue = $("input[name='input_sandwich_choice']:checked").val(); console.log(checkedvalue); if (checkedvalue == "panini") { $("#div_bread_options").collapse('hide'); $("#div_butter_options").collapse('show'); } else if (checkedvalue == "sandwich") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else if (checkedvalue == "baguette") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else { console.log("oops."); } }); }); also recommend use console.log instead of alert, way script not stop each time alert something.
so final should this::::
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <title></title> </head> <body> <label class="radio"><input type="radio" name="input_sandwich_choice" value="panini">panini</label> <label class="radio"><input type="radio" name="input_sandwich_choice" value="sandwich">sandwich</label> <label class="radio"><input type="radio" name="input_sandwich_choice" value="baguette">baguette</label> <div id="div_bread_options" class="collapse span3"> <!--2.2--> <h4>which bread like?</h4> <label class="radio"><input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white">white</label> <label class="radio"><input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown">brown</label> <label class="radio"><input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary">granary</label> <label class="radio"><input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""></label> </div> <!--2.2--> <div id="div_butter_options" class="collapse span3"> <!--2.3--> <h4>would butter?</h4> <label class="radio"><input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="yes">yes</label> <label class="radio"><input type="radio" id="id_option_butter_no" name="input_butter_choice" value="no">no</label> <label class="radio"><input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""></label> </div> <!--2.3--> </div> <script type="text/javascript"> $(document).ready(function() { $("input[name=input_sandwich_choice]").click(function() { var checkedvalue = $("input[name='input_sandwich_choice']:checked").val(); console.log(checkedvalue); if (checkedvalue == "panini") { $("#div_bread_options").collapse('hide'); $("#div_butter_options").collapse('show'); } else if (checkedvalue == "sandwich") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else if (checkedvalue == "baguette") { $("#div_bread_options").collapse('show'); $("#div_butter_options").collapse('hide'); } else { console.log("oops."); } }); }); </script> </body> </html> 
Comments
Post a Comment