<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> </head> <body> <center> <!--文本框--> 用户名:<input type="text" name="username" id="username" value="初始值" /> <br /> <br /> <!--下拉列表--> 部门: <select name="unit" id="unit" style=" 200px;"> <option value="0" selected>--请选择--</option> <option value="1">部门1</option> <option value="2">部门2</option> </select><br /> <!--多选框--> 爱好: <input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球 <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球 <input type="checkbox" name="aihao" id="" value="2" />羽毛球 <input type="checkbox" name="aihao" id="" value="3" />乒乓球 <br /> <!--单选框--> 性别: <input type="radio" name="gender" id="" value="0" checked="checked" />男 <input type="radio" name="gender" id="" value="1" />女 <br /> <br /> <input type="button" id="" value="改变文本值" onclick="initText()" /> <input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" /> <input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" /> <input type="button" id="" value="改变单选框值" onclick="changeRadio()" /> <input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" /> <script type="text/javascript"> /*读取与改变文本框值*/ function initText() { alert($("#username").val()); $("#username").val("这是改变后的值"); } /*读取与改变下拉列表值*/ function changeSelect() { alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text()); $("#unit").val("2");
//或者
$("#level option[value='"+value+"']").attr("selected","true"); } function changeCheckbox() { /*获取多选框的值*/ // $aihaos是一个数组 var $aihaos = $("[name='aihao'][checked]"); alert("多选框选中个数:" + $aihaos.length); for(var i = 0; i < $aihaos.length; i++) { var value = $($aihaos[i]).val(); alert(value); } /*设置为不选中状态*/ $($aihaos).attr("checked", false); //设置其中一个为选中状态 $("[name='aihao'] :eq(2)").attr("checked", 'checked'); } function changeRadio() { /*获取单选框的值*/ // $aihaos是一个数组 var $aihaos = $("[type='radio'][checked]"); alert("多选框选中个数:" + $aihaos.length); for(var i = 0; i < $aihaos.length; i++) { var value = $($aihaos[i]).val(); alert(value); } //设改变单选框的值 $("[type='radio'] :eq(1)").attr("checked", 'checked');
$(":radio[value='线下']").prop("checked", true); } //动态给下拉列表增加选项 function addSelect() { var $unit = $("[name='unit']"); alert("多选框选中个数:" + $unit.length); $unit.append("<option value='3'>部门3</option>"); $("<option value='4'>部门4</option>").appendTo($unit); } </script> </center> </body> </html>
附加总结:
设置多选框联动(点一个，其他跟着变)
// 多选框联动
$("#empCheckAll").click(function(){
$("input[name='checkBox']").prop("checked",$(this).prop("checked"));
})
动态设置下拉列表的值:(有时候会不灵所以用下面这个)
$("[name='coursenature'] option[value='"+courseInfoBack.coursenature+"']").attr("selected","selected");
补充:建议还是用$("#selectId").val("222");的方式修改下拉列表的值。
例如:
<!DOCTYPE html>
<html>
<body>
<select id="test">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select></body>
</html>
<script>
$("#selectId").val("222");</script>