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来做。