jquery自定义check选择框

css：

.account_withdraw_div1_body_dv2_li4_ul {
margin-left:135px;
width:240px;
height:40px;
cursor:pointer;
}
.account_withdraw_div1_body_dv2_li4_sp1 {
width: 20px;
font-size: 14px;
float: left;
background: url("../images/news/201504280800.png") no-repeat center;
}
.account_withdraw_div1_body_dv2_li4_sp1 input {
text-decoration:none;
outline:none;
border:none;
background:none;
width:18px;
height:18px;
visibility:hidden;
float: left;
margin-top:20px;
}
.account_withdraw_div1_body_dv2_li4_1_sp1 {
width: 20px;
font-size: 14px;
background: url("../images/news/201504280801.png") no-repeat center;
float: left;
}
.account_withdraw_div1_body_dv2_li4_1_sp1 input {
text-decoration:none;
outline:none;
border:none;
background:none;
width:18px;
height:18px;
visibility:hidden;
float: left;
margin-top:20px;
}

js：

$(document).ready(function(){
  $(".account_withdraw_div1_body_dv2_li4_sp1").show();
  $(".account_withdraw_div1_body_dv2_li4_1_sp1").hide();
  $(".account_withdraw_div1_body_dv2_li4_ul").click(function(){
  $(".account_withdraw_div1_body_dv2_li4_sp1").toggle();
  $(".account_withdraw_div1_body_dv2_li4_1_sp1").toggle();
  });
  });

html:

<ul class="account_withdraw_div1_body_dv2_li4_ul">
              <span class="account_withdraw_div1_body_dv2_li4_sp1">
              <input class="" type="checkbox" id="" name=""/>
      </span>
      <span class="account_withdraw_div1_body_dv2_li4_1_sp1">
              <input class="" type="checkbox" id="" name=""/>              
      </span>
             <span class="account_withdraw_div1_body_dv2_li4_sp2">
              我已阅读并确认下方重要提示信息
              </span>
               </ul> 

效果图：

经验：本人在开始使用了<label></label>标签了，导致此方法在IE8浏览器显示正常，而在其他浏览器出现兼容性问题，后面去除了<label></label>标签，在各个浏览器均显示正常。