使用CSS或jQuery根据HTML输入的值设置不同的样式

我有一个包含大量输入的HTML表单，其中大部分是可选的。我想根据输入的值对其应用不同的CSS，因为我认为这样可以更容易地看到指定了哪些字段

例如，如果一个文本框实际输入了一个值，我希望它有不同的背景/边框颜色。我不确定如何编写一个CSS选择器来测试这一点（也不知道有多少浏览器支持它）

类似地，我有一些单选按钮，其中一个选项为“无”，但如果选择了任何其他选项，其标签文本应为粗体

理想情况下，我会使用CSS来实现这一点，但如果它需要jQuery，那就没关系了，特别是如果它能够提供更好的交叉浏览器

编辑这里有一些很好的答案——看起来JS就是这里的路径。通过阅读这些JS解决方案，我意识到CSS可以巧妙地满足一些需求：

• 表单可能会部分填充（当编辑实体时），这意味着不会触发“更改”事件
• 表单是动态的，可以添加新的文本框

---

最后，我选择了以下答案的混合，我将在这里包括这些答案，以防其他人发现它们有用：

var highlightInput = function () {
    var $this = $(this);
    if ($this.is(':text') || $this.is('textarea')) {
        $this.toggleClass('has-value', this.value.length > 0);
    } else if ($this.is(':radio') || $this.is(':checkbox')) {
        $this.parent().find('input[name="' + this.name + '"]').each(function () {
            var $label = $('label[for="' + this.id + '"]');
            var isSelected = this.checked && $label.text() != 'Unspecified';
            $label.toggleClass('selected-option', isSelected);
        });
    }
};

$('textarea, input:text').live('keyup', highlightInput)
                         .live('change', highlightInput)
                         .each(highlightInput);

$('input:radio, input:checkbox').live('change', highlightInput)
                                .each(highlightInput);

还有一些CSS，用疯狂的颜色作为占位符：

input[type=text].has-value, textarea.has-value { background-color:#0F0; }
label.selected-option { background-color:#0F0; }

---

我认为您必须使用jQuery-在文本框上连接ie“change”事件，检查文本框的值并分配适当的css类。大致如下：

$('input:text').change(function(){
   if($(this).val() == null)
       $(this).removeClass('has-value').addClass('no-value');
   else
       $(this).removeClass('no-value').addClass('has-value');
});

---

我认为您必须使用jQuery-在文本框上连接ie“change”事件，检查文本框的值并分配适当的css类。大致如下：

$('input:text').change(function(){
   if($(this).val() == null)
       $(this).removeClass('has-value').addClass('no-value');
   else
       $(this).removeClass('no-value').addClass('has-value');
});

---

您肯定需要JavaScript（如果愿意，可以使用jQuery）来实现这一点。以下是一个让您开始学习的示例：

$('input.foo').keydown(function() {
    var $this = $(this);
    var modClass = 'modified';
    $this.toggleClass(modClass, $this.val());
});

那是瞎子写的，所以我希望它能起作用。嵌套的

，如果它有一个值和一个类，则存在

澄清：我使用“keydown”是为了立即突出显示，而不是在输入失去焦点时。这不适合你的收音机。使用
change（）
，尽管我不知道在没有AJAX上下文的情况下为什么要使用
Live
，而当
委托
（或与上下文一起使用）更有效时。
您肯定需要JavaScript（jQuery，如果您愿意的话）来实现这一点。以下是一个让您开始学习的示例：

$('input.foo').keydown(function() {
    var $this = $(this);
    var modClass = 'modified';
    $this.toggleClass(modClass, $this.val());
});

那是瞎子写的，所以我希望它能起作用。嵌套的
，如果它有一个值和一个类，则存在

澄清：我使用“keydown”是为了立即突出显示，而不是在输入失去焦点时。这不适合你的收音机。使用
change（）
，尽管我不知道在没有AJAX上下文的情况下为什么要使用
Live
，而当
委托
（或与上下文一起使用）更有效时。
类似的方法应该可以做到：

$('textarea, input:text').change(function() {
    var isEmpty = $(this).val() == '';
    $(this).toggleClass('empty', isEmpty);
});

如果您想让类在每次按键时切换，请使用keypress（）方法，而不是change（）。
类似这样的方法应该可以做到：

$('textarea, input:text').change(function() {
    var isEmpty = $(this).val() == '';
    $(this).toggleClass('empty', isEmpty);
});

如果您想让类在每次按键时切换，请使用keypress（）方法而不是change（）。


我想您必须使用jquery来完成这一步。试一试

javascript如下所示：

$('form :input').change(function(){
    var $this = $(this);
    if($this.is(':text')) 
        $this.toggleClass('highlight', this.value.length > 0);

    if($this.is(':radio')) { // update all radios in group
        $this.parent().find('input[name="' + this.name + '"]').each(function(){
            $('label[for="' + this.id +'"]').toggleClass('bold', this.checked);
        });
    }
});

我想您必须使用jquery来完成这一步。试一试

javascript如下所示：

$('form :input').change(function(){
    var $this = $(this);
    if($this.is(':text')) 
        $this.toggleClass('highlight', this.value.length > 0);

    if($this.is(':radio')) { // update all radios in group
        $this.parent().find('input[name="' + this.name + '"]').each(function(){
            $('label[for="' + this.id +'"]').toggleClass('bold', this.checked);
        });
    }
});

JavaScript肯定会给你更好的跨浏览器体验。我认为没有任何CSS选择器可以做到这一点。我认为你应该编写一个函数，循环遍历每个字段，读取其值，然后对其应用适当的CSS属性。现在，将onchange事件绑定到具有相同fn的每个字段以处理该字段。如果你愿意，我可以编写代码。JavaScript肯定会给你更好的跨浏览器体验。我认为没有任何CSS选择器可以做到这一点。我认为你应该编写一个函数，该函数将循环遍历每个字段，读取其值，然后对其应用适当的CSS属性。现在，将onchange事件绑定到具有相同fn的每个字段以处理该字段。如果你想的话，我可以写代码。啊，巧妙地使用了toggleClass+1。请查看我的编辑--如果表单已填充怎么办？然后没有
change
事件触发，对吗？此外，表单可能会动态更新，加载后会向DOM中添加新的输入，具体取决于用户所做的操作。很高兴看到您解决了这个问题！啊，巧妙地使用了toggleClass+1手柄。请查看我的编辑--如果表单已填充怎么办？然后没有
change
事件触发，对吗？此外，表单可能会动态更新，加载后会向DOM中添加新的输入，具体取决于用户所做的操作。很高兴看到您解决了这个问题+1用于
live
。这实现了我需要的功能——即在加载后响应添加到DOM中的元素的能力。但是，当用户编辑实体并且在页面加载时填充输入时，会发生什么情况？在这种情况下，
change
不会触发，对吗？我可能会在脚本语言中添加该类。（PHP，.NET…）很公平，不过我个人认为我不会。除此之外，如果用户没有启用JS，那么它就不会更新，它会在代码中进一步分解逻辑。再次感谢您的回答——我肯定会使用
live
+1来使用
live
。这实现了我需要的功能——即在加载后响应添加到DOM中的元素的能力。但是，当用户编辑实体并且在页面加载时填充输入时，会发生什么情况？在这种情况下，
change
不会触发，对吗？我可能会在脚本语言中添加该类。（PHP，.NET…）很公平，不过我个人认为我不会。除此之外，如果用户不