<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.d3 {
margin:2px;
width:250px;
border:1px solid #F00;
/*display: none;*/
}
.d4 {
margin:2px;
width:30px;
border:1px solid #F00;
display: block;
background-color: yellow;
}
/*下面添加类好像和此处的顺序有关
*无论执行顺序，red都会覆盖blu的效果
*例如，如果先addClass('red'),
*再添加blu不会有效果的
*/
.blu{
background-color: blue;
}
.gre{
background-color: green;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>你好，世界！</h3>
<hr>
<input type="button" id="cal" value="结果">
<input type="button" id="shq" value="显示题目">
<input type="button" id="sha" value="显示进度">
<input type="button" id="blu" value="颜色blue">
<input type="button" id="gre" value="颜色green">
<input type="button" id="red" value="颜色red">
<input type="button" id="clr" value="清除样式">
<hr>
</div>
<div class="col-md-1">
<div id='answershowbox'>
<div class="d4" id="an1">1</div>
<div class="d4" id="an2">2</div>
<div class="d4" id="an3">3</div>
<div class="d4" id="an4">4</div>
<div class="d4" id="an5">5</div>
<div class="d4" id="an6">6</div>
<div class="d4" id="an7">7</div>
<div class="d4" id="an8">8</div>
<div class="d4" id="an9">9</div>
<div class="d4" id="an10">10</div>
<div class="d4" id="an11">11</div>
</div>
</div>
<div class="col-md-3">
<div id="questionshowbox">
<div class="d3" id="id1">
<input type='checkbox' name="z1" checked="checked" value='1' />123
<input type='checkbox' name="z1" checked="checked" value='2' />23
<input type='checkbox' name="z1" checked="checked" value='3' />3
</div>
<div class="d3" id="id2">
<input type='checkbox' name="z2" value='2' />234
<input type='checkbox' name="z2" value='3' />34
<input type='checkbox' name="z2" value='4' />4
</div>
<div class="d3" id="id3">
<input type='checkbox' name="z3" value='3' />345
<input type='checkbox' name="z3" value='4' />45
</div>
<div class="d3" id="id4">
<input type='checkbox' name="z4" value='4' />456
</div>
<div class="d3" id="id5">
<input type='checkbox' name="z5" checked="checked" value='5' />567
</div>
<div class="d3" id="id6">
<input type="radio" name="z6" checked="checked" value="male" />678
</div>
<div class="d3" id="id7">
<input type="radio" name="z6" value="female" />789
</div>
<div class="d3" id="id8">
<input type="radio" name="z8" value="male" />男
<input type="radio" name="z8" value="female" />女
</div>
<div class="d3" id="id9">
<input type="radio" name="z9" value="old" />老年
<input type="radio" name="z9" value="young" />青年
<input type="radio" name="z9" value="child" />儿童
</div>
<div class="d3" id="id10">
<input type="radio" name="z10" value="a" />A
<input type="radio" name="z10" value="b" />B
<input type="radio" name="z10" value="c" />C
<input type="radio" name="z10" value="d" />D
</div>
<div class="d3" id="id11">
<input type="radio" name="z11" value="a" />A
<input type="radio" name="z11" value="b" />B
<input type="radio" name="z11" value="c" />C
<input type="radio" name="z11" value="d" />D
</div>
</div>
</div>
<div class="col-md-4">
<div class="d3" id="show">
|
</div>
</div>
<div class="col-md-12">
<hr>
<div id="show1"></div><br>
<div id="show2"></div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
// 更改(添加 删除)样式
$(function() {
$("#clr").on("click",function(){
$(".d4").removeClass('blu');
$(".d4").removeClass('gre');
$(".d4").removeClass('red');
});
$("#blu").on("click",function(){
$(".d4").addClass('blu');
});
$("#gre").on("click",function(){
$(".d4").addClass('gre');
});
$("#red").on("click",function(){
$(".d4").addClass('red');
});
});
///////////////
// 选择和样式更改的联动
$('input[type=radio]').on('click',function() {
var name = $(this).attr('name');
var id = name.replace('z','');
var v='';
$('input[name=' + name + ']').each(function(){
if( $(this).prop('checked') ){
v += $(this).val();
}
});
$('#show').html( name + '<br>' + id + "<br> "+ v );
if( v.length >0){
$('#an'+id).addClass('blu');
}else{
$('#an'+id).removeClass('blu');
}
});
$("input[type=checkbox]").on('click',function(){
var name = $(this).attr('name');
var id = name.replace('z','');
var clist = $('input[name='+name+']');
var v='';
clist.each(function(){
if($(this).prop('checked')){
v = v + $(this).val();
}
});
if( v.length >0){
$('#an'+id).addClass('blu');
}else{
$('#an'+id).removeClass('blu');
}
});
///////////////
var len = $('.d3').length;
var id = 1;
// 显示和隐藏
$("#sha").on("click",function(){
$('#answershowbox').show();
$('#questionshowbox').hide();
});
$("#shq").on("click",function(){
//轮换显示
$('#answershowbox').hide();
$('#questionshowbox').show();
$('.d3').hide();
if(id>len){ id=1; }
$("#id"+id++).show();
});
///////////////
//取得选中值
$("#cal").on("click",function(){
var $check_boxes = $('input[type=checkbox]');
$("#show2").html($check_boxes.length);
var dropIds = new Array();
$check_boxes.each(function(){
if($(this).prop('checked')){
// dropIds.push($(this).attr('name') +":"+ $(this).val());
dropIds.push( {name:$(this).attr('name'), value:$(this).val()} );
}
});
$("#show1").html(JSON.stringify(dropIds) );
var selIds = new Array();
var $check_boxes = $('input[type=radio]');
$check_boxes.each(function(){
if($(this).prop('checked')){
// selIds.push($(this).attr('name')+":"+$(this).val());
selIds.push({name:$(this).attr('name'), value:$(this).val()});
}
});
$("#show2").html( JSON.stringify(selIds) );
return;
});
///////////////
</script>
</body>
</html>
浙公网安备 33010602011771号