点击功能没有标签但没有标签

Question

我有一些单选按钮的单选按钮没有标签，但是只要我将我的标签类添加到单选按钮来设置广播风格根据我的主题按钮，它停止工作。

这里是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。

ADDING 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'); 
});