Jquery - 确认已在需要的地方选中复选框组答案

【问题标题】：Jquery - confirm that a checkbox group has been checked where requiredJquery - 确认已在需要的地方选中复选框组
【发布时间】：2012-06-03 02:14:48
【问题描述】：

谁能告诉我如何解决这个验证问题？

我正在尝试为我们正在开发的应用程序编写一个特殊的验证脚本。 我们不想使用 jquery val 插件，有几个原因。获取代码的布局非常容易，我可以将它用于文本、文本区域和下拉框，但我一直在检查复选框和单选按钮。我对其进行了编码以查找可见字段集，然后在这些可见字段集中找到所需的[类名将包含'-required']复选框和单选字段。

保持我的代码结构相同，我该如何调整我拥有的内容，以便它会过滤掉上面未检查的内容，并在提交表单之前提供错误消息。 在产品类型下拉菜单中选择“船”。查看必填项和单选字段。

我尝试了not(':checked')，但这不起作用。我被困住了。请帮忙。

我的 jsfiddle 在这里： http://jsfiddle.net/justmelat/X3CGW/

html和jquery如下：

    <form method="post" action="">
    <div id="holdErrMsg"></div>
    <fieldset id="mainSection" name="mainSection">
                <legend style="color:blue; font-weight:bold">Project Overview Section</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="height: 33px; width: 178px;">Name<span style="color: red">*</span></td>
                        <td style="height: 33px"><input  id="1125" name="1125" class="1125-required" type="text" />1125</td>
                    </tr>
                    <tr>
                        <td style="height: 33px; width: 178px;">Email<span style="color: red">*</span></td>
                        <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" />1026</td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Title</td>
                        <td><input  id="1089" name="1089" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Type<span style="color: red">*</span></td>
                        <td><select id="1169" name="1169" class="1169-required">
                        <option value="">Select</option>
                        <option value="Cars">Cars</option>
                        <option value="Boats">Boats</option>
                        <option value="Planes">Planes</option>
                        </select>1169</td>
                    </tr>
                                        <tr><td>
                                        <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button>
                                        </td></tr>
                                    </table>
            </fieldset>

            <fieldset id="section-11" name="section-11">
                <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label>Size:<span style="color: red">*</span></label></td>
                        <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" />1245</td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td>
                        <td style="height: 35px">
                        <select id="1433" class="1433-required" name="1433">
<option value="">Select</option>
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select>1433</td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>

            <fieldset id="section-12" name="section-12">
                <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label>Size:</label></td>
                        <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color<span style="color: red">*</span>:</td>
                        <td style="height: 35px">
                                                <input type="checkbox" name="1433[]" id="1433[]" value="Orange" class="1433[]-required"/>Orange
                                                <input type="checkbox" name="1433[]" id="1433[]" value="Blue" class="1433[]-required"/>Blue
                                                <input type="checkbox" name="1433[]" id="1433[]" value="Green" class="1433[]-required"/>Green
                       >>1433[] </td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>
            <fieldset id="section-13" name="section-13">
                <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label>Size:</label></td>
                        <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td>
                        <td style="height: 35px">
                                                <input type="radio" name="1834" id="1834" value="None" class="valuetext 1834-required">None
                                                <input type="radio" name="1834" id="1834" value="All" class="valuetex 1834-required">All
                      &nbsp;&nbsp;|1834[] </td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Approver:</td>
                        <td style="height: 35px">
                                                <input type="checkbox" name="1149[]" id="1149[]" value"John  Marsh" class="1149[]-not_required"/>John Marsh
                                                <input type="checkbox" name="1149[]" id="1149[]" value"Phil Collins" class="1149[]-not_required"/>Phil Collins
                                                <input type="checkbox" name="1149[]" id="1149[]" value"Tom Green" class="1149[]-not_required"/>Tom Green
                       |1149[] </td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Engine:<span style="color: red">*</span></td>
                        <td style="height: 35px">
                                                <input type="radio" name="1898" id="1898" value="Type 1" class="valuetext 1898-required">Type 1
                                                <input type="radio" name="1898" id="1898" value="Type 2" class="valuetext 1898-required">Type 2
                      &nbsp;&nbsp;|1898 </td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset><br>
<fieldset id="section-1011" name="section-1011">
                <legend style="color:green; font-weight:bold">Misc Info Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label>Size:</label></td>
                        <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:</td>
                        <td style="height: 35px">
                        <select id="1302" name="1302">
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select></td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>


</form>

$("#section-11,#section-12,#section-13,#section-1011").hide();

var projtype = new Array(
        {value : 'Cars', sect_id : 'fieldset#section-11'},
        {value : 'Planes', sect_id : 'fieldset#section-12'},
        {value : 'Boats', sect_id : 'fieldset#section-13'}
    );
$("select#1169").on('change',function () {
var thisVal = $(this).val();
 var sect_id ="";
     //$('fieldset[id!="mainSection"]').hide();
    $(projtype).each(function() {
$(this.sect_id).hide();
        if(this.value == thisVal) {
        $(this.sect_id).show();
        }
    });        
$("#btnCatchReqFlds").on('click', function() {

    $("#holdErrMsg").empty();
    var chk_requiredButEmpty = $("fieldset:visible").find('input:checkbox[class*="-required"]').filter(function() {
        return not(':checked');
    });

    if (chk_requiredButEmpty.length) {
        chk_requiredButEmpty.each(function () {

            $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
        });
    }
    return !chk_requiredButEmpty.length;
});

})

【问题讨论】：

标签： jquery checkbox radio-button

【解决方案1】：

更新：

为了使这个更清晰和更容易理解，我认为您应该将所需的类完全分开。我还提倡使用有效的类名和 id，但这是你的电话，所以使用你的 html，我会通过删除类旁边的 - 来改变这一点。

<input type="checkbox" id="a1433[]" value="Orange" class="a1433[] required"/>Orange
                                                <input type="checkbox"  id="a1433[]" value="Blue" class="a1433[] required"/>Blue
                                                <input type="checkbox" id="a1433[]" value="Green" class="a1433[] required"/>Green

现在以下将正常工作：

 var chk_requiredButEmpty = $("fieldset:visible input[type=checkbox].required").not(':checked');

原文：

我认为您需要将行更改为：

var chk_requiredButEmpty = $("fieldset:visible").find('input:checkbox[class*="-required"]').filter(function() {
    return $(this).not(':checked');
});

此外，您输入的 id 应该以字母开头。尽管它们可能仍然有效，但它们现在仍然无效。

【讨论】：

Lucuma - 我尝试添加 [return $(this).not(':checked');]，但它不起作用
是的，我们继承了这个应用程序，所以将来会将该类名更改为数字。
如果您至少可以在输入中添加一个类，无论您是否可以像我添加的答案一样，甚至像req 这样的另一个类，它都会变得更简单。以$("fieldset:visible input[type=checkbox].req").not(':checked'); 为例。一个元素可以有多个类，所以不知道为什么它是这样完成的。继承的代码几乎总是fun。
男孩是不是很痛苦。但我想这就是世界的方式。你用一种方法做，别人用另一种方法做。非常感谢你。再次通过类名运行后，您的代码就可以工作了。谢谢！！！！
lucuma：我认为这是可行的，但是当我选中其中一个收音机和/或复选框时，它们仍然看起来好像没有选中。如果您查看 myfiddlelink，选择船，单击按钮，一切看起来都不错，但然后选择单选中的值之一或检查然后单击按钮。