<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 操作select radio checkbox_www.jb200.com</title>
<script type="text/
javascript" src="../js/jquery-2.1.0.js"></script>
<script>
$(function () {
//checkbox获取选中项
$('#checkbox_huoqu').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_div input[type='checkbox']:
checked").each(function () {
$('#checkbox_result_div').append(this.value + " ");
});
});
//checkbox全选/取消全选
$('#checkbox_checkall').click(function(){
$("#checkbox_div input[type='checkbox']").prop("checked",$(this).prop("checked"));
});
//checkbox反选
$('#checkbox_fanxuan').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_checkall").removeAttr("checked");
$("#checkbox_div input[type='checkbox']").each(function () {
if ($(this).prop("checked")) {
$(this).removeAttr("checked");
} else {
$(this).prop("checked", 'true');
}
});
});
//选中checkbox第2项的值
$('#checkbox_setvalue').click(function () {
$('#checkbox_result_div').html("");
$("#checkbox_checkall").removeAttr("checked");
$("#checkbox_div input[type='checkbox']").removeAttr("checked");
$("#checkbox_div input[type='checkbox'][value='2']").prop("checked","true");
});
//获取select选中的值
$('#select_huoqu').click(function () {
$('#select_result_div').html("");
var checkText=$("#select_id").find("option:selected").text();
var checkValue=$("#select_id").find("option:selected").val(); //获取Select选择的Value
$('#select_result_div').html("select选择的text:"+checkText+" value="+checkValue);
});
//选中select选中的值
$('#select_setvalue').click(function () {
$('#select_result_div').html("");
$("#select_id").val(2);
//$("#select_id option[value='3']").prop("selected", true); //设置Select的Value值为2的项选中
});
//获取radio选中的值
$('#radio_huoqu').click(function () {
$('#radio_result_div').html("");
var checkValue=$("#radio_div input[type='radio']:checked").val(); //获取Select选择的Value
$('#radio_result_div').html("radio选择的value="+checkValue);
});
//选中radio选中的值
$('#radio_setvalue').click(function () {
$('#radio_result_div').html("");
$("#radio_div input[type='radio'][value='2']").prop("checked",true);
});
});
</script>
</head>
<body>
<div id="select_div">
<p>
脚本学堂（www.jb200.com）</p>
<select id="select_id" placeholder="请选择">
<option value=""
disabled selected style='display: none;'>请选择</option>
<option value="1">波音</option>
<option value="2">天宇</option>
<option value="3">苹果</option>
<option value="4">三星</option>
</select>
</div>
<div id="select_oper_div">
<input type="button" id="select_huoqu" value="获取选中项" />
<input type="button" id="select_setvalue" value="选中第2项" />
</div>
<div id="select_result_div"> </div>
<div> </div>
<div> </div>
<div id="checkbox_div">
<input type="checkbox" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
<input type="checkbox" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
<input type="checkbox" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
<input type="checkbox" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
<input type="checkbox" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
<input type="checkbox" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
<input type="checkbox" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
<input type="checkbox" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
</div>
<div id="checkbox_oper_div">
<input type="checkbox" id="checkbox_checkall" /><label for="checkbox_checkall">全选/取消全选</label>
<input type="button" id="checkbox_fanxuan" value="反选" />
<input type="button" id="checkbox_huoqu" value="获取选中项" />
<input type="button" id="checkbox_setvalue" value="选中第2项" />
</div>
<div id="checkbox_result_div"> </div>
<div> </div>
<div> </div>
<div id="radio_div">
<input type="radio" name="grade" value="1" id="in1" checked="checked" /><label for="in1">一年级</label>
<input type="radio" name="grade" value="2" id="in2" /><label for="in2">二年级</label>
<input type="radio" name="grade" value="3" id="in3" /><label for="in3">三年级</label>
<input type="radio" name="grade" value="4" id="in4" /><label for="in4">四年级</label>
<input type="radio" name="grade" value="5" id="in5" /><label for="in5">五年级</label>
<input type="radio" name="grade" value="6" id="in6" /><label for="in6">六年级</label>
<input type="radio" name="grade" value="7" id="in7" /><label for="in7">七年级</label>
<input type="radio" name="grade" value="8" id="in8" /><label for="in8">八年级</label>
</div>
<div id="radio_oper_div">
<input type="button" id="radio_huoqu" value="获取选中项" />
<input type="button" id="radio_setvalue" value="选中第2项" />
</div>
<div id="radio_result_div"> </div>
<div> </div>
<div> </div>
</body>
</html>
