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

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>