表格中复选框的Jquery验证码答案

【问题标题】：Jquery validation code for check box in table表格中复选框的Jquery验证码
【发布时间】：2017-05-07 17:28:12
【问题描述】：

从上图中，我添加了更多功能，所以我的问题是对于每一项技能 GD（或）PI（或）两个复选框都必须是强制性的。（必须选择至少一个复选框）我怎样才能做到这一点。？这是我的html：

<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/

【问题讨论】：

我会考虑使用浏览器验证，例如<input class="selectGdSkill" type="checkbox" count="0" id="skill[0][gdskill]" name="skill[0][gdskill]" required> 他们有很好的支持caniuse.com/#search=required
@23tux - 除了个别复选框不是强制性的外，要求每一行至少有一个复选框被选中。
$("tr").each(function() { if ($(this).find(":checked").length === 0) { ... } }) - 或类似的计算给定行中检查项目的东西？
我这个设置是用一张桌子吗？如果是这样，你能展示这些行是如何排列的吗？您可以按照您的要求做，只需要在布局上提供更多上下文。
@nnnnnn 它不工作你能在底部提供完整的答案吗？

标签： javascript php jquery validation checkbox

【解决方案1】：

这里你的 HTML 我已经改变了输入框 ID 并把你的表 <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;
            }

         });

    })
})

【讨论】：

【解决方案2】：

为所有复选框赋予相同的类名并尝试这个

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

【讨论】：

对于每个动态创建的技能<tr> 我想要一些这样的..？ if($('.selectGdSkill || .selectPiSkill :checkbox:checked').length==0){

【解决方案3】：

如果每个技能的两个复选框都为空，请说至少在复选框上选择

  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;
    }

它适用于每个<tr>，但仅适用于selectGdSkill 和

我正在从两个复选框 GD（或）PI 中寻找任何人

【讨论】：