我需要通过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 可以实现这个结果吗?
最佳答案
不需要 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;
}
对于单选按钮 http://jsfiddle.net/jphellemons/XvZY9/1/
来源:http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/demo.html
关于jquery - 使用 jQuery 设置复选框样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17082072/