<!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>