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

问题是您使用单选按钮作为输入元素。选中后，再次单击它们将不会取消选中它们，因此不会“更改”它们的状态。除非您单击属于同一组的其他单选按钮。这意味着如果您单击两次相同的元素，则更改功能将不起作用。

尝试使用复选框，它将起作用 - ＆gt; http://jsfiddle.net/jPMF9/

Answer 2

问题在于您正在使用更改事件，该事件在第二次单击无线电时不会触发，因为它不会更改。但根据您的代码，您可能需要考虑使用标签，这将允许在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返回。

Answer 3

请你检查一下这个解决方案：

// 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");
    }
});

jquery，click事件有时不起作用

3 个答案: