radio单选按钮用图片替代在Chrome浏览器中不显示

在Chrome ，Firefox浏览器中不显示，在IE，360中显示。
还有就是为什么在360中显示的时候无法取得date的value的值。
求yenange指教<%@ page language="java" import="java.util.*,com.rms.admin.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>菜品排行前十</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
    <script type="text/javascript" src="<%=path%>/page/fusionChart/FusionCharts.js"></script>
    <script src="<%=path%>/page/rms_worker/jquery1.7.2.js" type="text/javascript"></script>  
 
<style type="text/css">  
         #radio1,#radio2,#radio3,#radio4,#radio5,#radio6{width:90px;height:30px;}
         #radio7,#radio8,#radio9,#radio10,#radio11,#radio12{position:absolute;left:-500px;}
         #radio1{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio1.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         #radio2{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio2.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         #radio3{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio3.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         #radio4{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio4.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         #radio5{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio5.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         #radio6{ background-image:url("<%=path%>/page/images/anniu/14.png")!important;} 
         #radio6.a{ background-image:url("<%=path%>/page/images/anniu/14a.png")!important;}
         
</style>
<script type="text/javascript">
       $(function () {
        //清空所有已选radio， 避免无法对应; 并隐藏
         $("#pVirtulRadios :radio").removeAttr("checked").hide();
         $("#pVirtulRadios label").click(function () {
             $("#pVirtulRadios label").removeClass("a");
             $(this).addClass("a");
        });
    });
  $(function(){
     $("button.punch").click(function(e){
          var $chkRadio = $("#pVirtulRadios :radio:checked");
          var date = $chkRadio.val();
          alert(date);
       // var date = $("input[name='date']:checked").val();
  var kname =$("input[name='kname']:checked").val();
  var url = 'dishNumChart.action';
         var data = { 'date' : date ,'kname' : kname};
         var fusionChart = new FusionCharts("<%=path%>/page/fusionChart/charts/"+e.target.id+".swf","chartId","600","500");
          $.ajax( {
              type : "POST",
               url : url,
              data : data,
              async: false,
          dataType : "text",
           success : function(data) {
           fusionChart.setDataXML(data);
           fusionChart.render("middle");
         }
          });
     });
});
</script>
  </head>
  
  <body>
     <div>
       按日期： <p id="pVirtulRadios" style="width:100%;">
                 <label id="radio1" for="radio7" ></label>
                 <label id="radio2" for="radio8" ></label>
                 <label id="radio3" for="radio9" ></label>
                 <label id="radio4" for="radio10" ></label>
                 <label id="radio5" for="radio11" ></label>
                 <label id="radio6" for="radio12" ></label>       
                 <input type="radio" name="date"  id="radio7" value="全部"/>
                 <input type="radio" name="date"  id="radio8" value="今天"/>
                 <input type="radio" name="date"  id="radio9" value="昨天"/>
                 <input type="radio" name="date"  id="radio10" value="最近三天"/>
                 <input type="radio" name="date"  id="radio11" value="最近一周"/>
                 <input type="radio" name="date"  id="radio12" value="最近一个月"/><br>
                </p>              
                        按菜品： <input type="radio" name="kname" value="0"/>全部
                 <input type="radio" name="kname" value="热菜"/>热菜
                 <input type="radio" name="kname" value="冷菜"/>冷菜
                 <input type="radio" name="kname" value="家常菜"/>家常菜
                 <input type="radio" name="kname" value="汤煲"/> 汤煲 <br>
                 
        <div id="right"> <br/>
        <button  type="button" class="punch" id="Column2D" >2D柱形图</button>
        <button  type="button" class="punch" id="Column3D">3D柱形图</button>
        <button  type="button" class="punch" id="Pie3D">3D饼图</button>
        <button  type="button" class="punch" id="Pie2D">2D饼图</button>
        <button  type="button" class="punch" id="Line">拆线图</button>
        </div>
        
       <center> <div id="middle"> </div></center>
      </div>
  </body>
</html>

解决方案 »

  1.   

    我在旧贴中，其实已讲清楚了，只是你没有看清楚。
     
    //清空所有已选radio， 避免无法对应; 并隐藏
    $("#pVirtulRadios :radio").removeAttr("checked").hide();改成
     
    //清空所有已选radio， 避免无法对应; 
    //不要隐藏， 因为样式中已将此控件移到了看不到的左方。隐藏后某些浏览器会有问题。
    $("#pVirtulRadios :radio").removeAttr("checked");我用图片也试过了， 在Firefox/IE8中都好使的。你下载了看看， 不用分的。
    http://download.csdn.net/detail/yenange/4744028
      

  2.   

    此外呢告诉你一些发贴的常用规矩， 算是方便自己也方便别人吧。
    1、简化代码，简化思路，把所有的思想精简成一个能直接运行的页面代码（特别是在javascript版块）那是最好不过。
    比方说：你用的是java， 人家用的是.net， 但是你问的是js的问题， 与后台及语系无关， 无论用的是什么语言， 最终生成的都是html， 为什么不直接贴上html代码呢？
    把所有无关的元素、js代码全部去掉， 只留下能表达你自己思想的、而且能运行的代码就可以了。 2、尽量减轻别人看贴的负担。不是每个人每个时段都那么有闲， 当你的代码能直接copy过来就能运行， 只是有点小bug需要别人修正时， 我想人家更愿意帮助你， 你的问题也就能更快解决。IT这行， 几乎很少有人每天有半小时以上的休闲时间， 更多的人只是忙里偷闲花几分钟看看论坛。 当你的问题不需要什么特定的环境， 能迅速调试时， 许多人愿意拿一杯茶的时间来帮你的。3、发贴时如果有代码，点，将代码放在中间就可以了，这样代码更加清晰。
      

  3.   

    非常感谢。刚刚学JAVA不久，谢谢大神的指导。
      

  4.   

    与hide（）无关额。。不过你的代码太给力。我感觉是我编码格式有问题。我直接复制粘贴就可以用了
      #radio1{
             background-image: url("<%=path%>/page/images/anniu/14.png");
             } 
    貌似这个大括号里面的内容必须分行