jquery，點擊事件有時並不起作用

Question

我的表格有多個input type="radio"，旁邊有文字。我想隱藏這些inputs並只顯示文字，這些文字會對點擊進行反應並更改inputs的值和背景顏色。

HTML：

<div class="right"> 
    <div> 
    <span onclick='$("input.rg1").attr("checked", false).change();'>Choose</span> 
    <div>A<input type="radio" name="radio[1]" class="rg1" value="1"></div> 
    <div>B<input type="radio" name="radio[1]" class="rg1" value="2"></div> 
    <div>C<input type="radio" name="radio[1]" class="rg1" value="3"></div> 
    </div> 
</div> 

的Javascript：

// Bind click event on divs and send it to radio input 
$("div.right div div").click(function(e){ 
if(!$(e.target).is("input")) 
{ 
    alert("Clicked Div/Text!") 
    $(e.target).children("input").click(); 
} 
}); 

// Hide all radio inputs, make only texts visible 
$("div.right input[type='radio']").hide(); 

// Bind change event on radio inputs, change 
// background-color of text that is next to clicked radio input 
$("div.right input[type='radio']").change(function(e){ 
    alert("change Event "+$(e.target).is(":checked")); 
    if($(e.target).is(":checked")) 
    { 
     $(e.target).parent().css("background-color", "#A00"); 
    } 
    else 
    { 
     $(e.target).parent().css("background-color", "#00A"); 
    } 
}); 

的問題是，當我的文字點擊旁邊的無線電（如A），2個警報彈出和背景顏色改變，但如果我再次點擊該文本，我只有第一個警報，但不是第二個。爲什麼？ 第一次提醒後，有$(e.target).children("input").click();應該運行該更改事件，但它不，雖然沒有任何條件。

任何人都可以給我一個關於最新錯誤的建議嗎？謝謝

Answer 1

的問題是，您使用的單選按鈕輸入元素。一旦選中，再次點擊它們不會取消選中它們，因此不會「改變」它們的狀態。除非您單擊屬於同一組的另一個單選按鈕，否則不會。這意味着如果您單擊兩次相同的元素，則更改函數將不起作用。

嘗試使用複選框，它會工作 - >http://jsfiddle.net/jPMF9/

Answer 2

可以請你檢查這個解決方案：

// Bind click event on divs and send it to radio input 
$("div.right div div").unbind("click").bind("click", function(e){ 
if(!$(e.target).is("input")) 
{ 
    alert("Clicked Div/Text!") 
    $(e.target).children("input").attr("checked", "checked"); 
    $(e.target).children("input").trigger("change"); 
} 
}); 

// Hide all radio inputs, make only texts visible 
$("div.right input[type='radio']").hide(); 

// Bind change event on radio inputs, change 
// background-color of text that is next to clicked radio input 
$("div.right input[type='radio']").unbind("change").bind("change", function(e){ 
    alert("change Event "+$(e.target).is(":checked")); 
    if($(e.target).is(":checked")) 
    { 
     $(e.target).parent().css("background-color", "#A00"); 
    } 
    else 
    { 
     $(e.target).parent().css("background-color", "#00A"); 
    } 
}); 

Answer 3

的問題是，您使用的更改事件，因爲它不改變在無線電點擊已經是第二次不火。但是根據你的代碼，你可能會考慮使用標籤，這將允許在除IE8以外的每個現代瀏覽器中使用純CSS來獲得相同的效果。唯一的問題是您的標籤必須遵循您的輸入。

你的HTML重做帶有標籤：

<input type="radio" id="radioa" name="radio[1]" class="rg1" value="1" /> 
<label for="radioa">A</label> 
<input type="radio" id="radiob" name="radio[1]" class="rg1" value="2" /> 
<label for="radiob">B</label> 
<input type="radio" id="radioc" name="radio[1]" class="rg1" value="3" /> 
<label for="radioc">C</label> 

的CSS：

[type=checkbox], [type=radio] { 
    display: none; 
}  

[type=checkbox] + label, [type=radio] + label { 
    background-color: #00A; 
} 

:checked + label { 
    background-color: #A00; 
} 

這做的。我繼續爲無線電和複選框做好了，因爲兩者都是可檢查的，但正如我所說的，它只有在<input /><label></label>之後纔可用，因爲CSS不會允許父選擇器，也不允許先前兄弟選擇器。如果這個命令不是一個選項，你就回過頭來通過js來做。