使用jQuery设置样式复选框

Question

我需要通过jquery来设置一些复选框,但我不想使用插件.我只需要一个简单的jQuery代码.

我想用一个简单的css风格列表.

<ul id="list">
 <li class="selected"><a id="1" href="#">1</a></li>
 <li><a id="2" href="#">2</a></li>
 <li><a id="3" href="#">3</a></li>
</ul>

同时我在代码中输入了由css隐藏的输入复选框:

<input type="checkbox" id="1" name="rivista_numero" value="1" checked />    
<input type="checkbox" id="2" name="rivista_numero" value="2" />
<input type="checkbox" id="3" name="rivista_numero" value="3" />

使用jquery,如果我点击"链接,父li元素将收到"selected"类,将检查具有相同ID的复选框.

你认为这可能是一个很好的解决方案吗？是否有可能用jQuery实现这个结果？

Answer 1

不需要javascript,只需要CSS http://jsfiddle.net/jphellemons/XvZY9/

HTML:

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>
<br/>
<input type="checkbox" id="c2" name="cc" />
<label for="c2"><span></span>Check Box 2</label>

CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    color:#000;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}

对于radiobutton的 http://jsfiddle.net/jphellemons/XvZY9/1/

来源:http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/demo.html