想知道是否有人可以帮助我改进我的代码。它只是一些基本的复选框选择，但我知道必须有一些较短的做法。
jQuery：
$(document).ready(function() {
$(".sendType").click(function() {
var what_is = $(this).attr("name");
var p = new RegExp('.*?(\\d+).*?((?:[a-z][a-z]+))',["i"]);
var m = p.exec(what_is);
if (m != null) {
check_all(m[1], m[2], (this).checked);
}
});
$(".controlType").click(function() {
var what_is = $(this).attr("name");
check_all(0, what_is, (this).checked);
});
function check_all(id, what, check) {
all = $("input:checkbox");
sa = $("input:checkbox.sendType."+id);
sac = $("input:checkbox:checked.sendType."+id).length;
sw = $("input:checkbox.sendType."+what);
if (id == 0) {
if (what == 'all') {
all.attr('checked', check);
} else {
sw.attr('checked', check);
}
}
if (what == 'all') {
sa.attr('checked', check);
} else {
if (sac == 2) {
if (check === true) {
sa.attr('checked', true);
} else {
$("input:checkbox.sendType.all."+id).attr('checked', false);
}
}
}
ce = $("input:checkbox.controlType.email");
ct = $("input:checkbox.controlType.text");
s2 = $("input:checkbox:not(:checked).sendType.email").length;
s3 = $("input:checkbox:not(:checked).sendType.text").length;
if (!s2) {
ce.attr('checked', true);
} else {
ce.attr('checked', false);
}
if (!s3) {
ct.attr('checked', true);
} else {
ct.attr('checked', false);
}
if (!s3 && !s2) {
all.attr('checked', true);
} else {
$("input:checkbox.controlType.all").attr('checked', false);
}
}
});
标记：
<ul class="form-section">
<li class="form-line">
<input type="checkbox" class="controlType all" name="all" value="1">
<input type="checkbox" class="controlType email" name="email" value="1">
<input type="checkbox" class="controlType text" name="text" value="1">
</li>
<li class="form-line">
<input type="checkbox" class="sendType all 1" name="id[1][all]" value="Charlie Gery allen">
<input type="checkbox" class="sendType email 1" name="id[1][email]" value="gery@live.com">
<input type="checkbox" class="sendType text 1" name="id[1][text]" value="0412345678">
<span id="id[1][name]">Charlie Gery allen</span>
</li>
<li class="form-line">
<input type="checkbox" class="sendType all 6" name="id[6][all]" value="ye ere ertert">
<input type="checkbox" class="sendType email 6" name="id[6][email]" value="blah@sdfsd.oer">
<input type="checkbox" class="sendType text 6" name="id[6][text]" value="0415698721">
<span id="id[6][name]">ye ere ertert</span>
</li>
<li class="form-line">
<input type="checkbox" class="sendType all 7" name="id[7][all]" value="erterert utrtuuy 67678">
<input type="checkbox" class="sendType email 7" name="id[7][email]" value="gggglll@mothing.com">
<input type="checkbox" class="sendType text 7" name="id[7][text]" value="0598746248">
<span id="id[7][name]">erterert utrtuuy 67678</span>
</li>
<li class="form-line">
<input type="checkbox" class="sendType all 8" name="id[8][all]" value="rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy">
<input type="checkbox" class="sendType email 8" name="id[8][email]" value="">
<input type="checkbox" class="sendType text 8" name="id[8][text]" value="">
<span id="id[8][name]">rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy</span>
</li>
<li class="form-line" id="id_2">
<button id="input_2" type="submit" class="form-submit-button">Send Message</button>
</li>
</ul>
如果有人能够做到这一点，谢谢你。
干杯 查理
答案 0 :(得分：1)
我冒昧地优化了JS代码和HTML。 （在某种程度上）
请在此处查看：http://jsfiddle.net/dominicbarnes/ybGbU/
<强> HTML
您会注意到我删除了一些类（“id”类，controlType和sendType，并添加了一些ID contact和control-line ）以及。
<ul id="contact" class="form-section">
<li>All Email Text</li>
<li id="control-line" class="form-line">
<input type="checkbox" class="all" name="all" value="1">
<input type="checkbox" class="email" name="email" value="1">
<input type="checkbox" class="text" name="text" value="1">
</li>
<li class="form-line">
<input type="checkbox" class="all" name="id[1][all]" value="Charlie Gery allen">
<input type="checkbox" class="email" name="id[1][email]" value="gery@live.com">
<input type="checkbox" class="text" name="id[1][text]" value="0412345678">
<span id="id[1][name]">Charlie Gery allen</span>
</li>
<li class="form-line">
<input type="checkbox" class="all" name="id[6][all]" value="ye ere ertert">
<input type="checkbox" class="email" name="id[6][email]" value="blah@sdfsd.oer">
<input type="checkbox" class="text" name="id[6][text]" value="0415698721">
<span id="id[6][name]">ye ere ertert</span>
</li>
<li class="form-line">
<input type="checkbox" class="all" name="id[7][all]" value="erterert utrtuuy 67678">
<input type="checkbox" class="email" name="id[7][email]" value="gggglll@mothing.com">
<input type="checkbox" class="text" name="id[7][text]" value="0598746248">
<span id="id[7][name]">erterert utrtuuy 67678</span>
</li>
<li class="form-line">
<input type="checkbox" class="all" name="id[8][all]" value="rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy">
<input type="checkbox" class="email" name="id[8][email]" value="">
<input type="checkbox" class="text" name="id[8][text]" value="">
<span id="id[8][name]">rrrrrrtyertertrrrrrr yyyyyyyetryeyyyyyyy</span>
</li>
<li class="form-line" id="id_2">
<button id="input_2" type="submit" class="form-submit-button">Send Message</button>
</li>
</ul>
<强>的JavaScript
我在这里完全重写了这部分，并包含了评论！
$(document).ready(function() {
// get and store a list of all the "non-control" checkboxes
// ie, look in #contact for any checkbox not within #control-line
var $checkboxes = $("#contact").find("li.form-line:not(#control-line) input:checkbox");
// now we'll enable the "control" checkboxes
$("#control-line input:checkbox").change(function() {
// if the selected control box has the "all" class
if ($(this).hasClass("all")) {
// then set all the "non-control" checkboxes to the same state as this one
$checkboxes.attr("checked", this.checked);
// as well as the sibling checkboxes (email and text)
$(this).siblings("input:checkbox").attr("checked", this.checked);
} else {
// otherwise, we only want to select a specific column, so we take the current className
// (this will break if you add any classes here, you could use a data-* attribute instead
$checkboxes.filter("." + this.className).attr("checked", this.checked);
}
});
// now let's attach a specific event to the "all" checkboxes
// we'll start with our cached collection from above, then filter it to find only `.all`
$checkboxes.filter(".all").change(function() {
// set all the checkbox siblings to the state of the current checkbox
$(this).siblings("input:checkbox").attr("checked", this.checked);
});
});