时间:2021-07-01 10:21:17 帮助过:23人阅读
之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来
代码如下:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.10.2.min.js"></script> <script type="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: 1px solid #049CDB; } .label_check input, .label_radio input { 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: 0 0px } .lblby label.c_on { background-position: 0 -26px; } .lblby .label_radio { background-position: 0 -52px; } .lblby label.r_on { background-position: 0 -78px; } .lblby .label_check input, .lblby .label_radio input { position: absolute; left: -9999px; } </style> <body class="lblby"> <label for="checkbox-01" class="label_check c_on"> <input type="checkbox" checked="checked" value="1" id="checkbox-01" name="sample-checkbox-01" /> Checkbox1 </label> <label for="checkbox-02" class="label_check"> <input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" /> Checkbox2</label> <label for="radio-01" class="label_radio r_on"> <input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" /> Radio1 </label> <label for="radio-02" class="label_radio r_off"> <input type="radio" value="1" id="radio-02" name="sample-radio" /> Radio2 </label> <label for="radio-03" class="label_radio r_off"> <input type="radio" value="1" id="radio-03" name="sample-radio" /> Radio3 </label> </body> </html>
相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
html怎么实现可输入的下拉菜单
a标签如何使用href属性与onclick事件
css3的新单位vw、vh、vmin、vmax应该如何使用
CSS的经典三栏布局如何实现
以上就是单选和多选按钮如何给图片加样式的详细内容,更多请关注Gxl网其它相关文章!