Question

was wondering if anyone could help me improve my code. Its just some basic checkbox selections, but I know that there must be some shorter ways of doing things.

The 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);
                    }
                }
            });

The markup:

<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="[e-mail]">
        <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="[e-mail]">
        <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="[e-mail]">
        <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>

If anyone can get to it, thanks heaps.

Cheers
Charlie

Answer 1

I’ve taken the liberty of optimizing both your JS code and your HTML. (to some degree)

Check it out here: http://jsfiddle.net/dominicbarnes/ybGbU/

HTML

You’ll notice that I’ve removed some classes (the “id” classes, controlType and sendType notably) and added some ids (contact and control-line) as well.

<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="[e-mail]">
        <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="[e-mail]">
        <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="[e-mail]">
        <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

I entirely rewrote this portion here, and included comments!

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