将复选框输入值放入复选框本身
问题描述:
我想将复选框的值放在复选框本身内,而不是位于复选框的旁边。将复选框输入值放入复选框本身
我认为这可能会给复选框旁边的简单文本带来整体更令人愉悦的视觉效果。
我只能用这个网站的jQuery 1.3.2(SaaS限制),所以只是一个头。
这是当前的复选框布局。我想打的复选框
内的值,这是我想什么它看起来像:
所以,我想知道,我怎么能这样做,并与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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&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&ie=UTF8&refinementHistory=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchBinNameList=subjectbin%2Cbrandtextbin%2Cprice%2Cgeneric_text_2-bin%2Cgeneric_text_1-bin%2Csize_name&searchNodeID=5819597011&searchRank=generic-one-desc-rank&searchSize=12" rel="nofollow">
<input type="checkbox">
One Size
</a>
</li>
</ul>
答
下面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>
你的意思是,当你点击复选框?值是复选框旁边的文字? – 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