0

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

这是我的小提琴

在 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}

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

4

3 回答 3

6

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

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

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

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

编辑——一些进一步的思考和一个有用的后续问题，让我意识到在单选按钮“单击”事件的事件处理程序中，该按钮将始终为“：选中”。“checked”属性的值在事件被调度之前由浏览器更新。（如果事件的默认操作被阻止，则将被逆转。）

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

于 2013-01-31T22:04:53.120 回答
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/

于 2013-01-31T22:06:07.963 回答
1

更新后

跟踪单选按钮的状态。例如，用于.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);
    });
});

看到它住在这里。

更新前

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

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

看到它住在这里。

于 2013-01-31T22:15:22.950 回答