jquery select操作/全选，反选，全部选,js图表

最新推荐文章于 2024-01-23 19:19:19 发布

weixin_33726943

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量766

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/rain21/blog/418595

版权

为什么80%的码农都做不了架构师？>>>

<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: '电子商务实习成绩'
        },
        subtitle: {
            text: '来源:http://t.domain.com'
        },
        xAxis: {
            categories: ['nameList']
        },
        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>

效果预览: