javascript - 当没有选择其中的单选按钮时，如何将表格单元格的背景颜色设置为红色？

Question

我是 JavaScript 新手，尤其是 jQuery，需要一些帮助。

我需要编写一个脚本来验证是否选择了单选按钮。如果没有选择任何单选按钮，我希望它们所在的表格单元格以红色突出显示以提醒用户注意它。

<table>
  <tr><td><input type="radio"/></td><td>value 1</td></tr>
  <tr><td><input type="radio"/></td><td>value 2</td></tr>
  <tr><td><input type="radio"/></td><td>value 3</td></tr>
</table>
<input type="submit"/>

编辑

我只希望突出显示包含单选按钮的单元格

Answer 1

var checked = false;

$('input:radio').each(function(){
    if($(this).prop('checked')){
        checked = true;
    }
});

if(!checked){
    $('table').css('background','red');
}

Answer 2

您可以只使用 .css() 函数

$('input[type=submit]').click(function(){ // <-- this assuming these aren't inside a form
// if it is then do this inside the submit function
// $('yourform').submit(function(){
    $('td').css('background-color',function(){
        return $('input[type=radio]:checked',this).length === 0 ? 'red' : '';
    });
});

小提琴

您可以使用:has或.has()选择器过滤掉带有输入的 td

$('input[type=submit]').click(function() {
// or $('td').has(input[type=radio])
    $('td:has(input[type=radio])').css('background-color', function() {
        return $('input[type=radio]:checked', this).length === 0 ? 'red' : '';
    });
});​

小提琴

Answer 3

$(document).on("click", "input[type='submit']", function(){
    if($("input[type='radio']:checked").size() === 0){
      $("table").css("background-color", "red");
    }else{
      $("table").css("background-color", "white");  
    }
});​

例子

编辑：

仅对于具有输入的表行而不是整个表，请使用以下内容：

$(document).on("click", "input[type='submit']", function(){
    if($("input[type='radio']:checked").size() === 0){
        $("table tr").has("input").css("background-color", "red");
    }else{
        $("table tr").has("input").css("background-color", "white");  
    }
});​

更新示例

Answer 4

1）首先检查是否选择了任何单选按钮。

var any_checked = false;

$("input:radio").each(function() {
    if ($(this).attr("checked") == 0) {
        any_checked = true;
    }
});​

2）给表格一些ID，说id="mytable" 现在检查的值any_checked，如果它是假的，那么没有选择单选按钮，所以通过使单元格变为红色来抛出错误。

$('#mytable').css('backgroundColor', 'red');

Answer 5

我确实以这种方式解决了它：

var IsValid = $("input[name=foo]:checked").length > 0;
$('input[name=foo]').parent().toggleClass('error', !IsValid);