Question

JS选择器：效果图如下截屏所示，当点击全选时，下面三项全选勾上，点击反选时，下面三项反选，

点击清空时，下面三项清空。同时当“讲师”那项勾上时，那一行就变成红色，其他情况不变色。

Answer 1

Javascript

<script type="text/javascript">
window.onload = function() {
    var inputs = document.getElementsByTagName("input");
                                             
    document.onclick = function(e) {
        e = e || window.event;
        if(e.target.id === "selectAll"
            || e.target.id === "selectOpp"
            || e.target.id === "selectNone") {
                                             
            for(var i = 0; i < inputs.length; i++) {
                if(inputs[i].type === "checkbox"
                    && inputs[i].id != "selectAll"
                    && inputs[i].id != "selectOpp"
                    && inputs[i].id != "selectNone") {
                                             
                    if(e.target.id === "selectAll") {
                        inputs[i].checked = true;
                    }
                    else if(e.target.id === "selectOpp") {
                        if(inputs[i].checked)
                            inputs[i].checked = false;
                        else
                            inputs[i].checked = true;
                    }
                    else {
                        inputs[i].checked = false;
                    }
                }
            }
            return false;
        }
        else if(e.target.type === "checkbox") {
            e.target.parentNode.style.background =
                e.target.checked ? "#f00" : "none";
        }
    };
};
</script>

jQuery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
    var checkboxes = $(":checkbox")
        .not("#selectAll, #selectOpp, #selectNone");
                        
    $("#selectAll").click(function() {
        checkboxes.prop("checked", true);
        return false;
    });
                        
    $("#selectOpp").click(function() {
        checkboxes.each(function() {
            $(this).prop("checked",
                $(this).is(":checked") ? false : true);
        });
        return false;
    });
                        
    $("#selectNone").click(function() {
        checkboxes.prop("checked", false);
        return false;
    });
                        
    checkboxes.change(function() {
        $(this).parent().css("background",
            $(this).is(":checked") ? "#f00" : "none");
    });
});
</script>

HTML

<p><input type="checkbox" id="selectAll" /> 全选
<input type="checkbox" id="selectOpp" /> 反选
<input type="checkbox" id="selectNone" /> 清空</p>
<div><input type="checkbox" /> xxx</div>
<div><input type="checkbox" /> yyy</div>
<div><input type="checkbox" /> zzz</div>

追问

可不可以用jquery基本选择器来做？就是带$符号那种，还有变色效果也没有出来

追答

更新了，Javascript，jQuery 两种方法，还有背景颜色。

忘了一点，点击上面三个按钮的时候应该根据情况分别加入

Javascript

inputs[i].parentNode.style.background = "#f00";
或
inputs[i].parentNode.style.background = "none";

jQuery

$(this).parent().css("background", "#f00");
或
$(this).parent().css("background", "none");

已经回答追问，第一个回答更改不了了，你自己琢磨一下加上吧。