В каждой таблице проверьте цвет фона и подтвердите выбор

Question

У меня есть таблица с некоторым количеством цветов, окрашенным в зеленый цвет. Каждая строка имеет флажок. Когда я нажимаю кнопку «Отправить», мне нужно проверить, что только зеленый цвет, чьи флажки не отмечены, должен быть проверен. Никаких других цветных рядов и только зеленого (# 47A347). Ниже мой html.Can, кто-нибудь поможет мне получить решение.

<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

Попробуйте этот фрагмент. Должен дать вам предупреждение для каждого зеленого флажка, который не был проверен при щелчке на submit '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 вы можете использовать метод jQuery serialize для автоматического сбора данных формы. Чтобы отфильтровать ненужные поля, вы можете временно отключить их.