表格中复选框的Jquery验证码

Posted 2023-05-09

【中文标题】表格中复选框的Jquery验证码

【英文标题】：Jquery validation code for check box in table

【发布时间】：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 它不工作你能在底部提供完整的答案吗？

【参考方案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 中寻找任何人