點擊功能沒有標籤但沒有標籤

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