改进jQuery？

我想知道是否有人能帮我改进代码。这只是一些基本的复选框选择，但我知道一定有一些较短的方法

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>

查理·盖里·艾伦


你是埃尔特吗


erterert Urtuuuy 678


RRRRRR TYERTRRRRRRR YYYYYY ETRYYYYYYY


发送消息

如果有人能做到，谢谢你

干杯

---

Charlie

我自由地优化了JS代码和HTML。（在某种程度上）

在这里查看：

HTML

您会注意到，我已经删除了一些类（“id”类、

controlType

和

sendType

），并添加了一些id（

contact

和

controlline

）

---

如果使用更具描述性的变量名，生活会更美好。当你盯着一片sa、ct、ce、s2、s3等等的海洋时，很难建立程序流的心智模型。为什么要成为人类代码的缩小者？如果你告诉我们你希望脚本做什么，那也很好。否则，首先，你会让人们做不必要的工作，其次，你的脚本可能会被别人误解，他们会给你错误的建议。另请参见：

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

$(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);
    });
});