Javascript 将复选框输入值放入复选框本身
我想将我的复选框的值放在复选框本身的内部，而不是放在复选框的一侧 我认为这可能比复选框旁边的简单文本提供更令人愉悦的视觉效果 我只能在这个网站上使用jQuery1.3.2（SaaS限制），所以请注意 这是当前的复选框布局。我想把这些值放在复选框中 这就是我希望它看起来的样子： 所以，我想知道的是，我如何做到这一点，是用CSS还是JS？还是两者兼而有之 我当前的HTML如下所示：Javascript 将复选框输入值放入复选框本身,javascript,jquery,html,css,checkbox,Javascript,Jquery,Html,Css,Checkbox,我想将我的复选框的值放在复选框本身的内部，而不是放在复选框的一侧 我认为这可能比复选框旁边的简单文本提供更令人愉悦的视觉效果 我只能在这个网站上使用jQuery1.3.2（SaaS限制），所以请注意 这是当前的复选框布局。我想把这些值放在复选框中 这就是我希望它看起来的样子： 所以，我想知道的是，我如何做到这一点，是用CSS还是JS？还是两者兼而有之 我当前的HTML如下所示： <ul class="linkList" id="binValue-6"><li class="
<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>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
.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;
}
<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>
10
12
12米
您的意思是当您单击复选框时？值是文本，在复选框旁边？我想让它看起来像这样：从你的图像-它是带有文本的按钮，而不是checkboxes@Justinas正确，但是，我想让它看起来像那样。由于SaaS环境的工作方式，我无法更改HTML，但我相信有人能够帮助我使用一些聪明的CSS或jQuery。@janderson133787如果回答了您的问题，请接受这个答案。