Question

我有一些JS用于某些单选按钮，没有标签缠绕在单选按钮上，但只要我将标签类添加到单选按钮以根据我的主题设置单选按钮的样式，它就会停止工作。 / p>

这是JS

$("#bn_only_yes").click(function(){
$("#bn_yes").attr("checked", "checked");
});

以下是与

配合使用的代码

<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
<!-- ENDIF -->

<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
<a href="converter.php" alt="converter" class="new-window">{CURRENCY}</a>
<!-- ENDIF -->

以下是将标签类样式添加到输入但JS代码停止工作的代码

<!-- IF B_BN_ONLY -->
<br />
<b>{L_30_0063}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="n" {BN_ONLY_N} id="bn_only_no">
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now_only" value="y" {BN_ONLY_Y} id="bn_only_yes">
{L_030}
</label>
<!-- ENDIF -->

<!-- IF B_BN -->
<br />
<b>{L_496}</b>
<br />
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_no" value="no" {BN_N}>
{L_029}
</label>
<label class="tz-radiobutton">
<input type="radio" name="buy_now" id="bn_yes" value="yes" {BN_Y}>
{L_030}
</label>
<input type="text" name="buy_now_price" id="bn" size="10" value="{BN_PRICE}">
<a href="converter.php" alt="converter" class="new-window">{CURRENCY}</a>
<!-- ENDIF -->

我甚至尝试将输入ID添加到标签中，但它仍然无法正常工作。

任何人都有任何想法如何在JS中包含标签类以及输入ID。

添加TZ-RADIOBUTTON CSS

header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-hmenu a, .tz-vmenu a, .tz-   slidenavigator > a, .tz-checkbox:before, .tz-radiobutton:before
{
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;

header, footer, article, nav, #tz-hmenu-bg, .tz-sheet, .tz-slidenavigator > a, .tz- checkbox:before, .tz-radiobutton:before
{
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

label.tz-radiobutton:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
vertical-align: top;
content: ' ';
}
label.tz-radiobutton
{
cursor: pointer;
font-size: 13px;
font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
line-height: 16px;
display: inline-block;
color: #323C43 !important;
position: relative;
}

.tz-radiobutton>input[type="radio"]
{
vertical-align: baseline;
margin: 0 5px 0 0;
}

label.tz-radiobutton.active:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}

label.tz-radiobutton.hovered:before
{
background: #FFFFFF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border:1px solid #8496A4;
margin:0 auto;
width:16px;
height:16px;
display: inline-block;
}

label.tz-radiobutton input[type="radio"]
{
display: none;
}

label.tz-radiobutton.tz-checked:after
{
content: url('../images/radiobuttonicon.png');
position: absolute;
line-height: 12px;
left: 2px;
top: 2px;
}

Answer 1

由于

，您永远不会看到已检查的输入

label.tz-radiobutton input[type="radio"] {
display: none;
}

Answer 2

看到你的CSS我想你想在点击#btn_yes上添加一个样式到label.tz-radiobutton.tz-checked:after {}的标签，并显示一个带有它的图标。

1）在您发布的CSS中，}上方的行中缺少结束header, footer, ...。

2）要使样式正常工作，您需要在标签中添加一个类tz-checked：

$("#bn_only_yes").click(function(){
    $("#bn_yes").parent().addClass('tz-checked');
});

The third FIDDLE

如果你想在复选框上设置属性checked：

$("#bn_only_yes").click(function(){
    $("#bn_yes").attr('checked', 'checked').parent().addClass('tz-checked');
});

单击功能无标签，但没有标签

2 个答案: