jQuery更改checkbox的样式

Question

<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>
为什么没有效果的？

Answer 1

试下使用click事件$(document).ready(function(){
                         
    $(".CheckBoxClass").click(function(){
        
    if($(this).attr("checked"))
        {
    
            $(".CheckBoxLabelClass").removeClass();
            $(this).addClass("CheckBoxSelected");
        }
        
        
    });

Answer 2

弄不懂你的意思是什么,如果所有选择了一个样式未选择的一个样式的话$(document).ready(function(){
                         
    $(".CheckBoxClass").click(function(){ 
    if($(this).attr("checked"))
        {
    
                       $(this).addClass("CheckBoxSelected");
        }
        else
{
$(this).removeClass("CheckBoxSelected");}
        
    });

Answer 3

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

Answer 4

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

Answer 5

现在 原因出在 display:none; ....

Answer 6

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

Answer 7

没有 css我懂啊 
如果没有
  .CheckBoxClass{
        display: none;
    }
原来那个框就出现 ，现在我想用自定义图片覆盖掉原来那个框，虽然网上有用div来模拟，我要用type="checkbox" 来实现 好像很难实现呀！大家有什么好的办法？

Answer 8

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

Answer 9

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

Answer 10

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