将复选框输入值放入复选框本身

时间：2014-09-05 14:20:24

标签： javascript jquery html css checkbox

我想将复选框的值放在复选框本身的内部，而不是放在复选框的旁边。

我认为这可能会比复选框旁边的简单文字更令人满意。

我只能在这个网站上使用jQuery 1.3.2（SaaS限制），所以只需要提醒。

这是当前的复选框布局。我想将值放在复选框

中

Picture #1

这就是我想要它的样子：

Picture #2

所以，我想知道，我怎么能这样做，是用CSS还是JS？或两者兼而有之？

我当前的HTML如下所示：

<ul class="linkList" id="binValue-6"><li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="10" type="hidden">        <a href=".com/b/5819597011?field_size_name=10&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
10
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="12" type="hidden">        <a href=".com/b/5819597011?field_size_name=12&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
12
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="12M" type="hidden">        <a href=".com/b/5819597011?field_size_name=12M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
12M
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="14" type="hidden">        <a href=".com/b/5819597011?field_size_name=14&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
14
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="16" type="hidden">        <a href=".com/b/5819597011?field_size_name=16&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
16
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="18M" type="hidden">        <a href=".com/b/5819597011?field_size_name=18M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
18M
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="24" type="hidden">        <a href=".com/b/5819597011?field_size_name=24&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
24
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="24M" type="hidden">        <a href=".com/b/5819597011?field_size_name=24M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
24M
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="2T" type="hidden">        <a href=".com/b/5819597011?field_size_name=2T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
2T
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="3T" type="hidden">        <a href=".com/b/5819597011?field_size_name=3T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
3T
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="4" type="hidden">        <a href=".com/b/5819597011?field_size_name=4&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
4
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="4T" type="hidden">        <a href=".com/b/5819597011?field_size_name=4T&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
4T
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="5" type="hidden">        <a href=".com/b/5819597011?field_size_name=5&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
5
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="6" type="hidden">        <a href=".com/b/5819597011?field_size_name=6&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
6
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="6X" type="hidden">        <a href=".com/b/5819597011?field_size_name=6X&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
6X
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="7" type="hidden">        <a href=".com/b/5819597011?field_size_name=7&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
7
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="8" type="hidden">        <a href=".com/b/5819597011?field_size_name=8&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
8
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="9M" type="hidden">        <a href=".com/b/5819597011?field_size_name=9M&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
9M
</a>
</li>
<li class="binValue">
<input name="binId" value="size_name" type="hidden">    <input name="binValue" value="One Size" type="hidden">        <a href=".com/b/5819597011?field_size_name=One+Size&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&amp;searchNodeID=5819597011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow"> 
<input type="checkbox">   
One Size
</a>
</li> 
</ul>

1 个答案:

答案 0 :(得分：1)

CSS下面应该是你正确的轨道

.cb-toolbar input[type="checkbox"] {
    display:none; 
}

.cb-toolbar label {
    display:inline-block;
    background-color:#ddd;
    padding:4px 11px;
    font-family:Arial;
    font-size:16px;
}

.cb-toolbar input[type="checkbox"]:checked + label { 
    background-color:#bbb;
}

这是html标记。

<div class="cb-toolbar">
    <input type="checkbox" id="checkbox1" name="radios" value="all" checked>
    <label for="checkbox1">10</label>

    <input type="checkbox" id="checkbox2" name="radios"value="false">
    <label for="checkbox2">12</label>

    <input type="checkbox" id="checkbox3" name="radios" value="true">
    <label for="checkbox3">12M</label> 
</div>

<强> Live Demo with JSFIDDLE

相关问题
最新问题