jquery select操作/全选，反选，全部选,js图表
<script>
$(document).ready(function(){
var district=$('#district').text();
//alert(district);
if(district){
//$(".district").find("option[text='+district+']").attr("selected",true);
$("#dis").val(district);
//alert(district);
}
$('#submit').click(function(){
var place=$('#place').val();
if(!place){
alert('请填写详细地址');
$('place').focus();
return false;
}
var name=$('#name').val();
if(!name){
alert('请填写姓名');
$('name').focus();
return false;
}
var mobile=$('#mobile').val();
if(!mobile){
alert('手机号格式不正确');
$('mobile').focus();
return false;
}
if(mobile.length!=11){
alert('手机号格式不正确');
$('mobile').focus();
return false;
}
var license_plate=$('#license_plate').val();
if(!license_plate){
alert('请填写车牌号');
$('license_plate').focus();
return false;
}
});
});
</script>
$(".district").find("option[text='+district+']").attr("selected",true);
$("#dis").val(district);
设置select选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
<form action="" method="" enctype="">
<p><input type="checkbox" name="items" value="football"/>足球</p>
<p><input type="checkbox" name="items" value="basketball"/>篮球</p>
<p><input type="checkbox" name="items" value="badminton"/>羽毛球</p>
<p><input type="checkbox" name="items" value="tennis"/>乒乓球</p>
</form>
<p>
<button class="btn btn-default" id="checkall">全选</button>
</p>
<p>
<button class="btn btn-default" id="nocheck">全不选</button>
</p>
<p>
<button class="btn btn-default" id="check1">反选</button>
</p>
</div>
<script>
$(document).ready(function(){
$('#checkall').click(function(){
$('[name=items]:checkbox').attr('checked',true);
});
$('#nocheck').click(function(){
$('[name=items]:checkbox').attr('checked',false);
});
$('#check1').click(function(){
//alert(123);
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked;
});
});
});
</script>
</body>
</html>
jquery1.6以后用prop
将attr改成prop，http://api.jquery.com/prop/#prop-propertyName 有详细的介绍
图表
<html>
<head>
<meta charset="UTF-8" />
<title>charts</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: '汉口学院2012级电子商务实习成绩'
},
subtitle: {
text: '来源:http://t.zy62.com'
},
xAxis: {
categories: ['李姗姗','李婵','王莉','陈伊','詹黎明','王文莉','贺中义','李小明','叶晨蕾','陈思敏','陶飘','卢欣','蒋康莉','汪贝贝','周婷','胡祥','殷正桓','康迪','陈康','王君','王楚雄','张光辉','熊雄','梅傲伟','周佳辉','王胜','陈诚','吴贞伟','刘石头','谢博','胡文理','康灿','曹洋','何宽','黄子云','郭佩','骆建群','李丹妮','丁纹','冉金女','雷宇','文宇','蔡明','熊金杉','骆李慧','李姣','谭琪','周童谣','童梦龄','李倩','刘畅','何辉','陶雨','叶润藻','顾文豪','熊珑','喻备','平志鹏','曹源','胡汉兵','徐永飞','肖哲昱','胡敏','程福康','李吉星','何昌庭','周新广','徐述桃','邹哲浩']
},
yAxis: {
title: {
text: '成绩'
}
},
tooltip: {
enabled: false,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y;
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
credits: {
text: 'hkxy99',
href: 'http://t.zy62.com'
},
series: [{
name: '成绩',
data: [93,87,84,84,84,80,88,86,86,86,86,84,87,86,86,83,84,83,84,84,84,79,87,83,83,83,84,86,84,83,84,83,78,83,86,86,86,84,86,86,80,87,86,84,87,88,84,79,87,84,86,83,88,84,83,96,95,83,83,95,84,86,86,79,87,86,89,86,84]
}]
});
});
</script>
</head>
<body>
<div>
<div id="container" style="min-width:700px;height:400px"></div>
</div>
</body>
</html>
效果预览:
