JavaScript DHTML/jQuery/val
Содержание
- 1 Get input text from Text Box
- 2 Get the input value of the first matched element
- 3 Set multiple value for select
- 4 Set the value attribute of every matched element
- 5 Set value for text field
- 6 Set value to form input field
- 7 val(val) checks, or selects, all the radio buttons, checkboxes, and select options
Get input text from Text Box
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("input").val()); }); </script> </head> <body> <body> <button>Do</button> <form> <input type="text" /> </form> </body>
</html>
</source>
Get the input value of the first matched element
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ function displayVals() { var singleValues = $("#single").val(); $("p").html(singleValues); } $("select").change(displayVals); }); </script> </head> <body> <body>
<select id="single"> <option>Single</option> <option>Single2</option> </select> </body>
</html>
</source>
Set multiple value for select
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#multiple").val(["Multiple2", "Multiple3"]); }); </script> </head> <body> <body> <select id="multiple" multiple="multiple"> <option>Multiple</option> <option>Multiple2</option> <option>Multiple3</option> </select> </body>
</html>
</source>
Set the value attribute of every matched element
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function () { var text = $(this).text(); $("input").val(text); }); }); </script> </head> <body> <body> Press button to fill the text box.
<button>A</button> <button>B</button> <button>C</button>
<input type="text" value="click a button" /> </body>
</html>
</source>
Set value for text field
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").removeAttr("disabled").focus().val("editable now"); }); </script> </head> <body> <body> <button>Enable</button> <input type="text" disabled="disabled" value="data"/> </body>
</html>
</source>
Set value to form input field
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("label + input").css("color", "red").val("value") }); </script> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Address:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> </body>
</html>
</source>
val(val) checks, or selects, all the radio buttons, checkboxes, and select options
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check1","check2", "radio1" ]); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <body> <select id="single"> <option>1</option> <option>2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select>
<input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body>
</html>
</source>