首页 网络技术
  1. 正文

HTML单选和多选按钮怎么给图片加样式

  代码如下:

  <!DOCTYPEHTML>

  <html>

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <scripttype="text/javascript"src="jquery-1.10.2.min.js"></script>

  <scripttype="text/javascript">

  $(function(){

  $("input[type='checkbox']").click(function(){

  if($(this).is(':checked')){

  $(this).attr("checked","checked");

  $(this).parent().removeClass("c_off").addClass("c_on");

  }else{

  $(this).removeAttr("checked");

  $(this).parent().removeClass("c_on").addClass("c_off");

  }

  });

  $("input[type='radio']").click(function(){

  $("input[type='radio']").removeAttr("checked");

  $(this).attr("checked","checked");

  $(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");

  });

  });

  </script>

  </head>

  <style>

  

  label{

  display:block;

  cursor:pointer;

  line-height:26px;

  margin-bottom:20px;

  width:26px;

  height:26px;

  line-height:26px;

  float:left;

  margin-top:6px;

  }

  .radios{

  padding-top:18px;

  border-top:1pxsolid#049CDB;

  }

  .label_checkinput,.label_radioinput{

  margin-right:5px;

  }

  .lblby.label_check,.lblby.label_radio{

  margin-right:8px;

  }

  .lblby.label_radio,.lblby.label_check{

  background:url(../images/jxc_btn.png)no-repeat;

  }

  .lblby.label_check{

  background-position:00px

  }

  .lblbylabel.c_on{

  background-position:0-26px;

  }

  .lblby.label_radio{

  background-position:0-52px;

  }

  .lblbylabel.r_on{

  background-position:0-78px;

  }

  .lblby.label_checkinput,.lblby.label_radioinput{

  position:absolute;

  left:-9999px;

  }

  </style>

  <bodyclass="lblby">

  <labelfor="checkbox-01"class="label_checkc_on">

  <inputtype="checkbox"checked="checked"value="1"id="checkbox-01"name="sample-checkbox-01"/>

  Checkbox1</label>

  <labelfor="checkbox-02"class="label_check">

  <inputtype="checkbox"value="1"id="checkbox-02"name="sample-checkbox-02"/>

  Checkbox2</label>

  <labelfor="radio-01"class="label_radior_on">

  <inputtype="radio"value="1"checked="checked"id="radio-01"name="sample-radio"/>

  Radio1</label>

  <labelfor="radio-02"class="label_radior_off">

  <inputtype="radio"value="1"id="radio-02"name="sample-radio"/>

  Radio2</label>

  <labelfor="radio-03"class="label_radior_off">

  <inputtype="radio"value="1"id="radio-03"name="sample-radio"/>

  Radio3</label>

  </body>

  </html>



本文标题:HTML单选和多选按钮怎么给图片加样式
本文链接:https://www.qqooo.cn/post/6972.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!