2016-12-22 2 views
1

Image of skills required Из картинки я добавил больше функциональности, Так что мой вопрос для каждого навык GD (или) PI (или) оба флаг должен быть обязательными. (По крайней мере один флажок должен быть выбран) как я могу это достичь.? это мой HTML:Jquery код проверки для флажка в таблице

<a class="text-center btn btn-danger addSkills">+ Add Skills</a> 
<input class="selectGdSkill" type="checkbox" count="0" id="skill[0][gdskill]" name="skill[0][gdskill]"> 
<input class="selectPiSkill" type="checkbox" count="0" id="skill[0][piskill]" name="skill[0][piskill]"> 

это добавить больше функциональности код:

var skillcount = 1; 
$(".addSkills").click(function() { 
    $('#jobSkills tr:last').after('<tr> 
    <td><input class="searchskill" count="' + skillcount + '" id="skill_' + skillcount + '_title" name="skill[' + skillcount + '][title]" type="text" autocomplete="off"></td><td><input count="' + skillcount + '" id="skill_' + skillcount + '_weightage" name="skill[' + skillcount + '][weightage]" type="text" autocomplete="off"></td> 
    <td><select class="wp-form-control" name="skill[' + skillcount + '][type]"><option value="0">Select Test Type</option><option value="1">Practice Test</option><option value="2">Qualifying</option></select></td> 
    <td><input class="selectGdSkill" type="checkbox" count="' + skillcount + '" id="skill[' + skillcount + '][gdskill]" name="skill[' + skillcount + '][gdskill]"></td> 
    <td> <input class="selectPiSkill" type="checkbox" count="' + skillcount + '" id="skill[' + skillcount + '][piskill]" name="skill[' + skillcount + '][piskill]"></td> 
    <td><span class="removeSkill" id="' + skillcount + '" ><a style="color:red">Remove</a></span></td> 
    </tr>'); 
    skillcount++; 
}); 

помочь мне в скрипкой: https://jsfiddle.net/r359b453/6/

+0

Я бы рассмотреть возможность использования валидаций браузера, как <класс = типа 'ввода "selectGdSkill"= "флажок" Count = "0" ID = "умение [0] [gdskill]" название =" умение [0] [gdskill] "required>' У них довольно хорошая поддержка. http://caniuse.com/#search=required – 23tux

+0

@ 23tux. Кроме того, что отдельные флажки не являются обязательными, необходимо, чтобы каждая строка имела по крайней мере один флажок. – nnnnnn

+0

'$ (" tr "). Each (function() {if ($ (this) .find (": checked "). Length === 0) {...}})' - или что-то вроде того, что подсчитывает отмеченные элементы в заданной строке? – nnnnnn

ответ

2

Подари же имя класса для всех флажком и попробовать это

$(document).ready(function() { 
    $("#submitBTN").click(function(e) {     
     if($('.case:checkbox:checked').length==0){ 
      alert("Please select");     
     }   
    }); 
}); 
+0

Для каждого динамически созданного навыка '' Мне нужно что-то вроде этого ..? 'if ($ ('. selectGdSkill || .selectPiSkill: checkbox: checked'). length == 0) {' –

1

Если оба флажка установлены пустуют для каждого навыка говорят, выбрать по крайней мере на флажком

var rows = document.getElementsByTagName('tr'); 
    var isTableValid = true; 
    for(var i=0;i<rows.length;i++) { 
     var checkboxs=rows[i].getElementsByClassName("selectGdSkill");//add "selectPiSkill" class in this 
     var okay=false; 
     for(var j=0;j<checkboxs.length;j++){ 
      console.log('here' + checkboxs[j].checked); 
      if(checkboxs[j].checked){ 
       okay=true; 
       break; 
      } 
     } 
     if(!okay && checkboxs.length > 0) { 
      isTableValid = false; 
      break; 
     } 
    } 
    if(isTableValid) 
    return true; 
    else 
    { 
     alert("Please select atleast one checkbox every skill either GD or PI"); 
     return false; 
    } 

он workking для каждого <tr>, но только для selectGdSkill И

Ищу Любой из двух Флажки GD (или) PI

3

Вот ваш HTML я изменил идентификаторы ввода и поместить ваш стол <div id="myDiv"> <table id="tableID"> <tr> GD<input class="selectGdSkill" type="checkbox" id="selectGdSkill_0"> PI<input class="selectPiSkill" type="checkbox" id="selectPiSkill_1"> </tr> <br> <tr> GD<input class="selectGdSkill" type="checkbox" id="selectGdSkill_1"> PI<input class="selectPiSkill" type="checkbox" id="selectPiSkill_1"> </tr> </table> <button id="JobSubmit" class="btn btn-success text-center">SUBMIT JOB</button> </div>

Это код javascript для проверки.

$(document).ready(function(){ 
    $("#JobSubmit").on("click",function(){   
     var IDs = []; 
     $("#myDiv").find("input").each(function(){ IDs.push(this.id); }); 
     console.log(IDs); 

     $.each(IDs, function(i, value) { 
      if(!($("#"+value).is(":checked"))){ 
       alert("Atleast one checkbox has to select from every tr"); 
       return false; 
      } 

     }); 

    }) 
})