$(":input['checkbox'] + label").each( function(){
if ( $(this).prev()[0].checked )
$(this).addClass("checked");
})
.hover(
function() { $(this).addClass("over"); },
function() { $(this).removeClass("over"); }
)
.click( function() {
             var contents = $(this).parent().parent(); 
$(":input['checkbox'] + label", contents).each( function() {
$(this).removeClass()
$(this).prev()[0].checked = false;
});
$(this).addClass("checked")
    $(this).prev()[0].checked = true;
})
.prev().hide();
});<div id="dx">
<p>第一组></p>
    <div>
<p><input id="CheckBox1" type="checkbox"  /><label >Checkbox 1</label></p>
<p><input id="CheckBox2" type="checkbox" /><label >Checkbox 2</label></p>
</div>
    
 <p>第二组></p>
    <div>
<p><input id="CheckBox3" type="checkbox" /><label >Checkbox 3</label></p>
<p><input id="CheckBox4" type="checkbox" /><label >Checkbox 4</label></p>
</div> 
</div>现在只能选择单项  怎么才可以任选?

解决方案 »

  1.   

    <div id="dx"> <p>第一组></p>  <div>  <p><input id="CheckBox1" type="checkbox" name="ck1" /><label >Checkbox 1</label></p>  <p><input id="CheckBox2" type="checkbox" name="ck1" /><label >Checkbox 2</label></p> </div>  <p>第二组></p>  <div>  <p><input id="CheckBox3" type="checkbox" name="ck1" /><label >Checkbox 3</label></p>  <p><input id="CheckBox4" type="checkbox" name="ck1" /><label >Checkbox 4</label></p> </div> </div>
      

  2.   

    加了name属性 还是不行!
      

  3.   

    上面js没错?现在还是只能选择单项 不能任选多项!why?help!
      

  4.   


    <!Doctype html public '-//w3c//dtd xhtml 1.0 transitional//en' 'http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
    <script language='javascript' src='js/jquery-1.3.2.js'></script>
    <script language='javascript' type='text/javascript'>
    $(document).ready(
    function()
    {
    $(":input['checkbox'] + label").each( function(){
                if ( $(this).prev()[0].checked )
                    $(this).addClass("checked");
                })
            .hover(
                function() { $(this).addClass("over"); },
                function() { $(this).removeClass("over"); }
                )
            .toggle( function()
    {
    $(this).prev()[0].checked=true;
     $(this).addClass("checked");
    },
    function()
    {
    $(this).prev()[0].checked=false;
     $(this).removeClass("checked");
    }); 
    }
    );
    </script>
    </head>
    <body>
    <div id="dx">
    <p>第一组></p> 
    <div>  
    <p><input id="CheckBox1" type="checkbox" /><label >Checkbox 1</label></p> 
    <p><input id="CheckBox2" type="checkbox" /><label >Checkbox 2</label></p> </div>
    <p>第二组></p> 
    <div>  
    <p><input id="CheckBox3" type="checkbox" /><label >Checkbox 3</label></p> 
    <p><input id="CheckBox4" type="checkbox" /><label >Checkbox 4</label></p> </div>
    </div>
    </body>
    </html>不知道要的是不是这种效果
      

  5.   

    多谢8楼 现在可以实现多选了  但是我自定义的css 图片无法覆盖原来的选择框 我想用图片自定义选择框#dx label {
    padding-left: 26px;
    background: url(RUnCheck.png) no-repeat;
    }
    #dx label.checked {
    padding-left: 26px;
    background: url(RCheck.png) no-repeat;
    color: #008800;
    }
      

  6.   

    差最后一个问题了 我自定义的css 图片无法覆盖原来的选择框 我想用图片自定义选择框 应该怎么来?