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
<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>
Get the input value of the first matched element
<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>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</body>
</html>
Set multiple value for select
<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>
Set the value attribute of every matched element
<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.
<div>
<button>A</button>
<button>B</button>
<button>C</button>
</div>
<input type="text" value="click a button" />
</body>
</html>
Set value for text field
<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>
Set value to form input field
<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>
val(val) checks, or selects, all the radio buttons, checkboxes, and select options
<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><br/>
<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>