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

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

我认为这可能会给复选框旁边的简单文本带来整体更令人愉悦的视觉效果。

我只能用这个网站的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>

来源

2014-09-05 janderson133787

你的意思是，当你点击复选框？值是复选框旁边的文字？ – 2014-09-05 14:23:01

我想使这个http://i.imgur.com/DksAwlU.png看起来像这样：http://i.imgur.com/n3UQjNX.png – janderson133787 2014-09-05 14:26:00

从您的图像 - 它是与文本的按钮，而不是复选框 – Justinas 2014-09-05 14:27:18

下面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

来源

2014-09-05 14:34:57 doforumda

@ janderson133787接受这个答案，如果它回答你的问题。 – doforumda 2014-09-05 14:43:21

我同意@doforumda – Allan 2014-09-05 15:16:47

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

回答

相关问题