网站首页JavaScript
常用表单元素的赋值和取值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单元素的赋值和取值</title>
<style type="text/css">input[type=text],textarea{width:250px;}textarea{height:154.5px;resize:none;}</style>
</head>
<body>
<input name="demo-input-text" type="text"  value="PHP是世界上最好の语言">
<br>
<br>
<textarea name="demo-textarea">
孩儿立志出乡关
学不成名誓不还
埋骨何须桑梓地
人生无处不青山
</textarea>
<br>
<br>
<select name="demo-select">
    <option value="1">刘一</option>
    <option value="2">陈二</option>
    <option value="3">张三</option>
    <option value="4">李四</option>
    <option value="5">王五</option>
    <option value="6" selected>赵六</option>
    <option value="7">孙七</option>
    <option value="8">周八</option>
    <option value="9">吴九</option>
    <option value="10">郑十</option>
</select>
<br>
<br>
<input name="demo-input-radio" type="radio" value="guanyu">
关羽 &nbsp;
<input name="demo-input-radio" type="radio" value="zhangfei" checked>
张飞 &nbsp;
<input name="demo-input-radio" type="radio" value="zhaoyun">
赵云 &nbsp;
<input name="demo-input-radio" type="radio" value="machao">
马超 &nbsp;
<input name="demo-input-radio" type="radio" value="huangzhong">
黄忠 &nbsp;<br>
<br>
<input name="demo-input-checkbox" type="checkbox" value="sgyy">
三国演义 &nbsp;
<input name="demo-input-checkbox" type="checkbox" value="shz" checked>
水浒传 &nbsp;
<input name="demo-input-checkbox" type="checkbox" value="xyj">
西游记 &nbsp;
<input name="demo-input-checkbox" type="checkbox" value="hlm">
红楼梦 &nbsp;<br>
<br>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
    var val = null;
    var text = null;
    var arr = null;

    //========== 文本域 ==========//
    val = $('input[name="demo-input-text"]').val(); // 取值
    console.log(val); // PHP是世界上最好の语言

    $('input[name="demo-input-text"]').val('从入门到放弃'); // 赋值

    //========== 文本区域 ==========//
    val = $('textarea[name="demo-textarea"]').val(); // 取值
    console.log(val);
    // 孩儿立志出乡关
    // 学不成名誓不还
    // 埋骨何须桑梓地
    // 人生无处不青山

    $('textarea[name="demo-textarea"]').val('不识庐山真面目\r\n只识弯弓射大雕');
    val = $('textarea[name="demo-textarea"]').val(); // 取值（正确用法）
    console.log(val);
    // 不识庐山真面目
    // 只识弯弓射大雕

    val = $('textarea[name="demo-textarea"]').text(); // 取值（错误用法，text()只能获取初始值，不能获取即时值）
    console.log(val);
    // 孩儿立志出乡关
    // 学不成名誓不还
    // 埋骨何须桑梓地
    // 人生无处不青山

    //========== 下拉列表 ==========//
    val = $('select[name="demo-select"]').val(); // 取值（value）
    text = $('select[name="demo-select"]').find('option:selected').text(); // 取值（文本）
    console.log(val, '<===>', text); // 6 <===> 赵六

    $('select[name="demo-select"]').val('3'); // 赋值
    val = $('select[name="demo-select"]').val(); // 取值（value）
    text = $('select[name="demo-select"]').find('option:selected').text(); // 取值（文本）
    console.log(val, '<===>', text); // 3 <===> 张三

    //========== 单选按钮 ==========//
    val = $('input[name="demo-input-radio"]:checked').val(); // 取值
    console.log(val); // zhangfei

    $('input[name="demo-input-radio"][value="zhaoyun"]').prop('checked', true); // 赋值
    val = $('input[name="demo-input-radio"]:checked').val(); // 取值
    console.log(val); // zhaoyun

    //========== 复选框 ==========//
    arr = [];
    $.each($('input[name="demo-input-checkbox"]:checked'), function(key, value) {
        arr.push($(value).val());
    });
    console.log(arr); // ['shz']

    $('input[name="demo-input-checkbox"][value="xyj"]').prop('checked', true); // 赋值
    arr = [];
    $.each($('input[name="demo-input-checkbox"]:checked'), function(key, value) {
        arr.push($(value).val());
    });
    console.log(arr); // ['shz', 'xyj']
});
</script>
</body>
</html>