<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<c:url value='/system/script/jquery-1.11.1.js'/>"></script>
<%-- <link rel="stylesheet" type="text/css" href="<c:url value='/system/css/bootstrap.css'/>"/> --%>
<style type="text/css" ></style>
<script>
$(document).ready(function() {
//获得单选按钮的value,text
$("[name='radioGroup']").on("change",function() {
var radioValue = $(this).val();
var radioText = $(this).parent().text();
$("#radioText").text("单选按钮的value："+radioValue + ",text:" + radioText);
});
//获得多选按钮的value,text
$("[name='checkGroup']").on("change",function() {
var array = new Array();
var arrayName = [];
$("[name='checkGroup']:checked").each(function(){
var cbVal = $(this).val();
var cbText = $(this).next().text();
array.push(cbVal);
arrayName.push(cbText);
}); $("#checkBoxText").text("多选按钮的val：" + array.join(",") + ",text:" + arrayName);
if ($("[name='checkGroup'][value='1']").is(':checked')) {
$("#checkBoxText1").text("多选按钮1被选中");
} else {
$("#checkBoxText1").text("");
}
});
//获得select的值
$("[name='selectGroup']").on("change",function() {
$("#selectText").text($(this).val() + ":" + $(this).find("option:selected").text());
}); $("[name='selectGroup1']").on("change",function() {
$("#selectText1").text($(this).val() + ":" + $(this).find("option:selected").text());
}); $("[name='selectGroup']").select(function() {
alert("qqq");
}); $("[name='selectGroup']").on("aaa", function() {
alert("aaa");
}); $("[name='selectGroup']").on("bbb", function (event, param) {
console.log(event);
alert(param.name);
});
}); //设置单选按钮的值
function setRadioVal(){
$("[name='radioGroup']").each(function() {
if($(this).val() == "2") {
$(this).prop("checked", true);
}
});
}
//设置多选按钮的值
function setCheckboxVal(){
$("[name='checkGroup']").each(function() {
$(this).prop("checked", false);
if($(this).val() == "2") {
$(this).prop("checked", true);
}
});
}
//设置下拉框的值
function setSelectVal(){
//$("[name='selectGroup']").val("2"); 设置下拉框的值
//这里可以看到，如果直接使用jquary去给select赋值，并不会触发他的change事件，这不是我想要的，所以就有了trigger方法；
//$("[name='selectGroup']").val("2").trigger("change");这样我们就可以触发change事件了 // $("[name='selectGroup']").val("2").trigger("select"); // $("[name='selectGroup']").val("2").trigger("aaa"); // jquary 自定义函数
var param = {};
param.name = "张三"
$("[name='selectGroup']").val("2").trigger("bbb", param); } //设置多选下拉框的值
function setManySelectVal() {
$("[name='selectGroup1'] option").each(function() {
if($(this).val() == "1" || $(this).val() == "2") {
$(this).attr("selected", true);
}
});
}
</script>
//设置单选按钮的值 change()不会有反应？
</head>
<body>
<label><input type="radio" name="radioGroup" value="1" />单选按钮1</label>
<label><input type="radio" name="radioGroup" value="2" />单选按钮2</label>
<button onclick="setRadioVal();">设置单选按钮的值为2</button>
<br>
<font color="red" id="radioText"></font>
<hr/>
<input type="checkbox" name="checkGroup" value="1"/><span>多选按钮1</span>
<input type="checkbox" name="checkGroup" value="2"/><span>多选按钮2</span>
<input type="checkbox" name="checkGroup" value="3"/><span>多选按钮3</span>
<button onclick="setCheckboxVal();">设置多选按钮的值为2</button>
<br>
<font color="red" id="checkBoxText"></font><br>
<font color="red" id="checkBoxText1"></font>
<hr/>
<select name="selectGroup">
<option value="1">select1</option>
<option value="2">select2</option>
<option value="3">select3</option>
</select>
<button onclick="setSelectVal();">设置下拉框的值为2</button>
<br>
<font color="red" id="selectText"></font>
<hr/>
<select name="selectGroup1" multiple="multiple">
<option value="1">select1</option>
<option value="2">select2</option>
<option value="3">select3</option>
</select>
<br>
<button onclick="setManySelectVal();">设置多选下拉框的值为1,2</button>
<font color="red" id="selectText1"></font>
</body>
</html>