將複選框輸入值放入複選框本身

我想將複選框的值放在複選框本身內，而不是位於複選框的旁邊。將複選框輸入值放入複選框本身

我認爲這可能會給複選框旁邊的簡單文本帶來整體更令人愉悅的視覺效果。

我只能用這個網站的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

將複選框輸入值放入複選框本身

回答

相關問題