Jquery - 如何删除复选框和收音机上的多个味精返回
Posted
技术标签:
【中文标题】Jquery - 如何删除复选框和收音机上的多个味精返回【英文标题】：Jquery - How do I remove multiple msg return on checkboxes and radio 【发布时间】：2012-06-07 13:27:53 【问题描述】：感谢这个论坛上的人们，我在代码工作中遇到了主要的痛苦，但我遇到了一些问题。
验证复选框/单选字段时，返回消息会针对每个未选中的单选/复选框给我一个响应。返回信息应该只是说一个'请填写1433'不是 请填写1433 请填写1433 请填写1433【群内每张支票/单选一条留言】
在这个继承的代码中，我实际上会将字段的名称添加到类中，但是在确定未选择所需的检查/无线电组中的任何内容后，我如何只获得一个消息？
我的小提琴：http://jsfiddle.net/justmelat/X3CGW/ [选择船或飞机，然后点击检查必填字段 btn]
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
|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
|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'],:input:radio[class*='-required']").filter(function()
return $(this).not(':checked');
);
if (chk_requiredButEmpty.length)
chk_requiredButEmpty.each(function ()
$("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
);
return !chk_requiredButEmpty.length;
);
);
【问题讨论】：
【参考方案1】：这是一个轻微的修改，首先创建一个空数组。在each 循环中，它会检查名称是否已经在数组中，如果没有，它将错误写入页面并将名称添加到数组中
http://jsfiddle.net/X3CGW/6/
【讨论】：
以上是关于Jquery - 如何删除复选框和收音机上的多个味精返回的主要内容，如果未能解决你的问题，请参考以下文章
Codeigniter：如何使用 jQuery 添加带有多选和删除复选框的列