Question

除非我弄错了。 jQuery和CSS处理:checked选择器的方式截然不同。在CSS中，当我使用:checked时，样式会在我点击时适当地应用，但在jQuery中，它似乎只能识别页面加载时DOM中最初的内容。我错过了什么吗？

这是我的Fiddle

在jQuery中：

$('input:checked').click(function () { 
   $('input:checked').css('background','#FF0000');
   $('input:checked+label').css('background','#ff0000');
});

在CSS中：

input:checked+label {font-weight:bold;color:#5EAF1E}

更新我应该澄清一下，如果用户点击已经选择的单选按钮，我要做的就是触发行为。

Answer 1

尝试以这种方式设置处理程序：

$('body').on('click', 'input:checked', function() {
  // ...
});

你拥有它的方式，你找到了代码运行时检查的所有元素。以上使用事件冒泡，以便在每次“点击”发生时进行测试。

在处理程序中，您正在更新所有选中元素的样式，即使任何特定点击只会更改一个。如果复选框的数量不是太大，那就没什么大不了的了。

编辑 - 一些进一步的想法，以及一个有用的后续问题，让我意识到在一个单选按钮“点击”事件的事件处理程序中，该按钮将始终被“检查”。在调度事件之前，浏览器会更新“已检查”属性的值。（如果阻止事件的默认操作，则会反转。）

我认为有必要添加一个类或使用.data()来跟踪“已检查”属性的阴影。单击一个按钮时，您将看到是否设置了自己的标志;如果是这样，那意味着在点击之前设置了按钮。如果没有，则设置标志。您还需要清除所有同名单选按钮的标志。

Answer 2

您只将事件绑定到最初检查的输入。从第一个选择器中删除:checked，它按预期工作（但很难看。）

http://jsfiddle.net/8rDXd/19/

$('input').click(function () { 
    $('input:checked').css('background','#FF0000');
    $('input:checked+label').css('background','#ff0000');
});

当然，您需要“撤消”使用jQuery进行的css更改，以便在取消选中输入时将其消除。

$('input').click(function () { 
    $('input').css('background','').filter(":checked").css('background','#FF0000');
    $('input+label').css('background','');
    $('input:checked+label').css('background','#ff0000');
});

http://jsfiddle.net/8rDXd/20/

Answer 3

更新后

跟踪单选按钮的状态。例如，使用.data()来保持单选按钮的内存状态。

$(function () {
    var $radio = $(":radio");
    $radio.filter(":checked").data("checked", true);
    $radio.on("click", function () {
        if ($(this).data("checked")) {
            alert("Already selected");
        }
        $radio.data("checked", false).filter(":checked").data("checked", true);
    });
});

See it live here.

BEFORE UPDATE

我想你想在这里使用.change()。

$('input:radio').change(function () {
    $('input, input+label').css('background', '');
    $('input:checked, input:checked+label').css('background', '#f00');
}).change();

~~See it live here.~~

输入：检查jQuery vs CSS？

3 个答案:

更新后

BEFORE UPDATE