jQuery更改checkbox的样式

[qqzeng-ip]

<div>
	<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
	<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>
	<input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
	<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>	
	</div>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						 
	$(".CheckBoxClass").change(function(){
		
	if($(this).attr("checked"))
		{
	
			$(".CheckBoxLabelClass").removeClass();
			$(this).addClass("CheckBoxSelected");
		}
		
		
	});
</script>

<style>
	.CheckBoxClass{
		display: none;
	}


		.CheckBoxLabelClass{
		background: url("UnCheck.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 28px;	
		width: 300px;
		display: block;
	}
		
	.CheckBoxSelected{
		background: url("Check.png") no-repeat;
		padding-left: 30px;
		padding-top: 3px;
		margin: 5px;
		height: 28px;	
		width: 300px;
		display: block;
	}
	
	</style>

为什么没有效果的？

[草根醉秋意]

试下使用click事件

$(document).ready(function(){
                         
    $(".CheckBoxClass").click(function(){
        
    if($(this).attr("checked"))
        {
    
            $(".CheckBoxLabelClass").removeClass();
            $(this).addClass("CheckBoxSelected");
        }
        
        
    });

[草根醉秋意]

弄不懂你的意思是什么,如果所有选择了一个样式未选择的一个样式的话

$(document).ready(function(){
                         
    $(".CheckBoxClass").click(function(){

 
    if($(this).attr("checked"))
        {
    
                       $(this).addClass("CheckBoxSelected");
        }
        else
{
$(this).removeClass("CheckBoxSelected");

}
        
    });

[qqzeng-ip]

我希望实现 初始化是 样式是CheckBoxLabelClass 选择后 样式是CheckBoxSelected 这样的功能

[develop_design_level]

[Quote=引用 3 楼 zengzhan 的回复:]
我希望实现 初始化是 样式是CheckBoxLabelClass 选择后 样式是CheckBoxSelected 这样的功能
[/Quote]


楼主，你能把你的语言表达的清晰一点么？
你想点击谁？把谁的样式由CheckBoxLabelClass 选择后是 CheckBoxSelected ？
看了一下你的CSS和HTML。你的checkbox被你display:none;了。我去点击谁？能告诉我么？

[qqzeng-ip]

现在 原因出在 display:none;

....

[develop_design_level]

[Quote=引用 5 楼 zengzhan 的回复:]
现在 原因出在 display:none;

....
[/Quote]

晕死，楼主，你还是学学CSS基础，或者找你们的美工帮你看看你要表达的东西，给你一个CSS样式。

[qqzeng-ip]

没有 css我懂啊
如果没有
.CheckBoxClass{
display: none;
}
原来那个框就出现 ，现在我想用自定义图片覆盖掉原来那个框，

虽然网上有用div来模拟，我要用type="checkbox" 来实现 好像很难实现呀！

大家有什么好的办法？

[develop_design_level]

你去看看Ext的模拟checkbox的做法吧。HTML里面的checkbox是HTML的控件，它没有背景图片。

[qqzeng-ip]

火狐下 可以额 但是ie下不可以 ie的huge？

[blueweiwei]

我把楼主的代码试了下，不知道楼主要的是什么效果，你css中.CheckBoxClass{ display: none;}了，页面中什么都点不到！

[qqzeng-ip]

[Quote=引用 10 楼 blueweiwei 的回复:]
我把楼主的代码试了下，不知道楼主要的是什么效果，你css中.CheckBoxClass{ display: none;}了，页面中什么都点不到！
[/Quote]


是啊 ie下 点击没有效果 火狐下 就有

有什么办法实现 兼容呢