All geek questions in one place

How to switch to javascript / jQuery

I have this HtML code and java script below. Suppose for this: when I click yes, the textarea field that says why I like cs should appear, and when I click no, vice versa. but doesn't it, any help?

<!DOCTYPE html> <html lang = "en"> <head> <meta charset="utf-8"> <title>forms.html</title> <h1> Welcome </h1> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui. css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(document).ready(function(){ $("img") .mouseover(function() { $(this).attr("src", "pika2.jpg"); }); $("img").mouseout(function() { $(this).attr("src", "pika1.jpg"); }); $("#show").hide(); $("#hide").hide(); $("#show").click(function(){ $("#hide").hide() }); $("#hide").click(function(){ $("#show").show() }); }); </script> </head> <body> <img src="pika1.jpg" alt="piakchu"/> <p> Please tell me who you are: </P> <form action="sumbit.html"> <p> <label for="First Name">First name:</label> <input type = "text" name="First Name" id="First Name" autofocus> </P> <p> <label for="Last Name">Last Name:</label> <input type = "text" name="Last Name" id="Last Name" required > </P> <div id="show"> <p> Do you like computer science: </p> <p><input type="radio" name="list" value="yes" id="yes"/> <label for="yes">Yes</label> <input type="radio" name="list" value="No" id="No"/> <label for="No">No</label> </P> </div> <div id="hide"> <p> <input type="submit" value="Submit your answers"/> </p> <p> Why don't you like computer science?: </p> <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> </textarea> </div> </form> </body>
+5
source share
6 answers

This should work, a text box should appear for you!

 $(document).ready(function(){ $("img") .mouseover(function() { $(this).attr("src", "pika2.jpg"); }); $("img").mouseout(function() { $(this).attr("src", "pika1.jpg"); }); $("#hide").hide(); $(".yes").click(function(){ $("#hide").show(); }); $(".no").click(function(){ $("#hide").hide(); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <img src="pika1.jpg" alt="piakchu"/> <p> Please tell me who you are: </P> <form action="sumbit.html"> <p> <label for="First Name">First name:</label> <input type = "text" name="First Name" id="First Name" autofocus> </P> <p> <label for="Last Name">Last Name:</label> <input type = "text" name="Last Name" id="Last Name" required > </P> <div id="show"> <p> Do you like computer science: </p> <p><input type="radio" name="list" value="yes" id="yes" class="yes"/> <label for="yes">Yes</label> <input type="radio" name="list" value="No" id="No" class="no"/> <label for="No">No</label> </P> </div> <div id="hide"> <p> <input type="submit" value="Submit your answers"/> </p> <p> Why don't you like computer science?: </p> <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> </textarea> </div> </form> </body>
+2
source

Your reply:..........

 $(document).ready(function(){ $("img") .mouseover(function() { $(this).attr("src", "pika2.jpg"); }); $("img").mouseout(function() { $(this).attr("src", "pika1.jpg"); }); $("#hide").hide(); $(".yes").click(function(){ $("#hide").show(); }); $(".no").click(function(){ $("#hide").hide(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <img src="pika1.jpg" alt="piakchu"/> <p> Please tell me who you are: </P> <form action="sumbit.html"> <p> <label for="First Name">First name:</label> <input type = "text" name="First Name" id="First Name" autofocus> </P> <p> <label for="Last Name">Last Name:</label> <input type = "text" name="Last Name" id="Last Name" required > </P> <div id="show"> <p> Do you like computer science: </p> <p><input type="radio" name="list" value="yes" id="yes" class="yes"/> <label for="yes">Yes</label> <input type="radio" name="list" value="No" id="No" class="no"/> <label for="No">No</label> </P> </div> <div id="hide"> <p> <input type="submit" value="Submit your answers"/> </p> <p> Why don't you like computer science?: </p> <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> </textarea> </div> </form> </body>
+3
source

For this purpose, you can use the ternary operator: JS:

 $(document).ready(function () { $("input:radio[name=list]").click(function () { $(this).val() == 'yes' ? $("#hide").show() : $("#hide").hide(); }); });

or

as suggested in the comments below:

 $("#hide").toggle(this.id=="yes");

Demo: http://jsfiddle.net/lotusgodkk/wg6zx2wj/1/

+2
source

demo - http://jsfiddle.net/victor_007/wg6zx2wj/

 $("input:radio[name=list]").click(function () { var value = $(this).val(); if (value == 'yes') { $("#hide").show() } else { $("#hide").hide() } });
+1
source

First of all, I have to change the value of the input type radio signal to true or false. Also, I think you are not writing the code you want. For example, at first both divs are hidden, and nothing makes them visible (because the radio is also hidden).

I think this is definitely the best approach to this:

 <!DOCTYPE html> <html lang = "en"> <head> <meta charset="utf-8"> <title>forms.html</title> <h1> Welcome </h1> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui. css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script> $(document).ready(function(){ $("img") .mouseover(function() { $(this).attr("src", "pika2.jpg"); }); $("img").mouseout(function() { $(this).attr("src", "pika1.jpg"); }); $("#whyNot").hide(); $(':radio[name="list"]').change(function() { var like = $(this).filter(':checked').val(); if (!JSON.parse(like)) { $("#whyNot").show(); } else { $("#whyNot").hide(); } }); }); </script> </head> <body> <img src="pika1.jpg" alt="piakchu"/> <p> Please tell me who you are: </P> <form action="sumbit.html"> <p> <label for="First Name">First name:</label> <input type = "text" name="First Name" id="First Name" autofocus> </P> <div> <label for="Last Name">Last Name:</label> <input type = "text" name="Last Name" id="Last Name" required > </div> <div> <p> Do you like computer science: </p> <p><input type="radio" name="list" value="true"/> <label for="yes">Yes</label> <input type="radio" name="list" value="false"/> <label for="No">No</label> </P> </div> <div id="whyNot"> <p> Why don't you like computer science?: </p> <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> </textarea> </div> <div> <input type="submit" value="Submit your answers"/> </div> </form> </body>
+1
source

Try it: first check the value of the switch and use show(); and hide(); jQuery method to switch div element

 $(document).ready(function () { $("input:radio[name=list]").click(function () { var value = $(this).val(); if (value == 'yes') { $("#hide").show(); } else { $("#hide").hide(); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <img src="pika1.jpg" alt="piakchu"/> <p> Please tell me who you are: </P> <form action="sumbit.html"> <p> <label for="First Name">First name:</label> <input type = "text" name="First Name" id="First Name" autofocus> </p> <p> <label for="Last Name">Last Name:</label> <input type = "text" name="Last Name" id="Last Name" required > </p> <div id="show"> <p> Do you like computer science: </p> <p><input type="radio" name="list" value="yes" id="yes"/> <label for="yes">Yes</label> <input type="radio" name="list" value="No" id="No"/> <label for="No">No</label> </P> </div> <div id="hide"> <p> <input type="submit" value="Submit your answers"/> </p> <p> Why don't you like computer science?: </p> <textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)"> </textarea> </div> </form> </body>
+1
source

Source: https://habr.com/ru/post/1207272/

More articles:


All Articles