Question

我有一个表格，其中一些行的颜色为绿色。每行都有一个复选框。当我单击提交按钮时，我需要验证是否只应检查未选中复选框的绿色行。没有其他彩色的行，只有绿色的行（＃47A347）。以下是我的HTML。任何人都可以帮我解决问题。

<form method="post" action="test2.html">
        <table>
            <tr bgcolor="#47A347" class="rowb">
                <td>Hello</td>
                <td><input type="checkbox" id="chk" class="linebox"></td>
            </tr>
           <tr bgcolor="#47A347" class="rowb">
                <td>Hello 1</td>
                <td><input type="checkbox" id="chk1" class="linebox"></td>
            </tr>
              <tr class="rowb">
                <td>Hello 2</td>
                <td><input type="checkbox" id="chk1" class=""></td>
            </tr>
            <tr>
                <td><input type="submit" id="btn" value="Submit"></td>
            </tr>
        </table>
            </form>

我已尝试过以下jquery代码。虽然它有效但有时会失败。

 <script>
             jQuery(document).on('click', '#btn', function (event) 
            {
                var rv = true; 
                $(".rowb").each(function() 
                {                       
                if($(this).css("background-color") == "rgb(71, 163, 71)") 
                {
                 var ischk = 0;
                 var row = $(this);                        
                 if (row.find('input[class="linebox"]').is(':checked') ) 
                 {
                      ischk++;
                 }
                 if(ischk==0)
                {   
                    rv=false;
                }
                }                         
                });
                 if (!rv) 
                 { 
                     alert('Please check');
                     event.preventDefault(); 
                 }
            });
        </script>

Answer 1

试试这个代码段。如果没有点击提交'btn'，则应该为每个绿色复选框提供警报。如果存在尚未选中的绿色行复选框，则将停止默认提交操作。

$(document).ready(function(){
 
  $('#btn').on('click', function(){  
    var i = 1;
    var error = false;
    $(".rowb").each(function() {  
      ischk = 0;
      if($(this).attr("bgcolor") == "#47A347") {                      
        if (!$(this).find('input.linebox').is(':checked') ) 
        {
          alert('Please check green checkbox #' + i);
          error = true;
        } 
        i++;
     }
    });
    if (error){
      event.preventDefault(); 
    }
 });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action="test2.html">
        <table>
            <tr bgcolor="#47A347" class="rowb">
                <td>Hello</td>
                <td><input type="checkbox" id="chk" class="linebox"></td>
            </tr>
           <tr bgcolor="#47A347" class="rowb">
                <td>Hello 1</td>
                <td><input type="checkbox" id="chk1" class="linebox"></td>
            </tr>
              <tr class="rowb">
                <td>Hello 2</td>
                <td><input type="checkbox" id="chk1" class=""></td>
            </tr>
            <tr>
                <td><input type="submit" id="btn" value="Submit"></td>
            </tr>
        </table>
            </form>

Answer 2

而不是在background-color中声明，请尝试检查bgcolor属性。

//if($(this).css("background-color") == "rgb(71, 163, 71)") 
if( $(this).attr("bgcolor") == "#47A347" )

以下是完整的重构代码：

jQuery(document).on('click', '#btn', function (event)
            {
                var rv = true;
                $(".rowb").each(function()
                    {
                        if($(this).attr("bgcolor") == "#47A347")
                            {
                                if ( !$(this).find('.linebox').is(':checked') )
                                {
                                    rv = false;
                                    return false
                                }
                            }
                    }); 
             if (!rv)
             {
                 alert('Please check');
                 event.preventDefault();
             }
        });

Answer 3

$('#btn').on('click', function(){
  var data = {};
  var form = $(this).closest('form');
  $('[bgcolor="#47A347"]', form).each(function(){
    data[this.id] = $(this).find('input').val();
  })
});

注意：您没有为输入提供name属性。使用name属性，您可以使用jQuery的serialize方法自动收集表单数据。要过滤掉不需要的字段，您可以暂时将它们设置为禁用状态。

在每个表中检查背景颜色并验证

3 个答案: