重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
用图片替换checkbox原始样式并实现同样的功能
1.结构：
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网页空间、营销软件、网站建设、阜新网站维护、网站推广。
2.css里：
1）设置图片的div绝对定位，调整让它与原始input重合。
2）设置input的宽高与图片的div一样大，这样精确一点。
3）然后设置input：position:relative；再设置它的z-index，让它浮在图片那个div的上面。
4）调整两个的位置，让之重合。
5）设置input：opacity:0;
3.jq里：
$(function(){
$("input").click(function(){
if(this.checked){
$(this).siblings(".box2").find("img").attr("src","被选中的图片的src");
}else{
$(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");
}
})
})注意：siblings()里面只能有一个属性。不能siblings(".box2>img")，这样是错的。
radio修改默认样式也是同样的道理,但是在jq里就要改一些东西了，
如果想点击第一个radio之后，再点击同一个name的radio，它被选中之后，第一个radio背景变为没选中，而第二个radio背景变为被选中，还用上面的jq里 的代码是不能实现的，会出现第一个选中之后，再点第二个会让两个的背景都是被选中的图片。
所以要在判定是否被选中的时候，加上：
$(function(){
$("input").click(function(){
$("input").each(function(){
if(this.checked){
$(this).siblings(".box2").find("img").attr("src","被选中的图片的src");
}else{
$(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");
}
})
})
})需要遍历一下input
补充：
用图片替换checkbox的样式
由于项目的需要，需要在登录的时候保存用户名，就需要使用checkbox。其中的checkbox样式为给定的一张图片，非选中：
，选中：
开始准备改变checkbox的样式以达到目的，结果无终而返。因为checkbox的大小，样式很难改变，反正打不到我想要的效果。于是试图通过用图片替换checkbox的样式。
主要知识点：
(1)通过 label 元素内点击图片，就会触发checkbox控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的checkbox控件上。
//checkbox通过css设置为隐藏
.clsCheckBox{
display:none;
}（2）点击图片时通过JS进行图片的切换。代码如下：
var result = true;
function checkbox() {
if (result==true)
{
document.images[0].src = "${ctx}/images/more/selector_focus.png";
result=false;
}
else if(result==false)
{
document.images[0].src = "${ctx}/images/more/selector_default.png"
result=true;
}
}登录页面代码：
用户登录 登录
总结
以上所述是小编给大家介绍的用图片替换checkbox原始样式并实现同样的功能 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
分享名称：用图片替换checkbox原始样式并实现同样的功能
文章起源：http://cqcxhl.cn/article/gidshp.html