Checkbox 單選 全選 反選

<html>
<head>
<script src="自己找個jquery引用下" type="text/javascript"></script></head>
<body>

<table class="table  table-hover table-condensed" border="0" cellpadding="0" cellspacing="0">

            <tbody>

                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>情緒表現</strong><input type="checkbox" name='checkparent' value="1" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全選</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="2"> 焦慮
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="3"> 煩躁
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="4"> 自卑
                                            </td>
                                </tr>



                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>適用年級</strong><input type="checkbox" name='checkparent' value="12" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全選</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="16"> 新高一
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="17"> 高一
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="19"> 高二
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="20"> 高三
                                            </td>
                                </tr>



                                <tr>
                                    <td style="font-size:14px;">
                                        <strong>主播小編</strong><input type="checkbox" name='checkparent' value="21" style="margin-left:20px;"><label style="color:#169bd5;font-weight:500;">全選</label>
                                    </td>


                                </tr>
                                <tr>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="22"> 呆子姐姐
                                            </td>
                                            <td>
                                                <input type="checkbox" name="checkchild" value="23"> 小然姐
                                            </td>
                                </tr>


            </tbody>
        </table>
</body>
</html>
<script type="text/javascript">
            $(function () {
                //$(':checkbox').click(function () {
                //    //判斷當前是否選中
                //    if (this.checked) {
                //        console.log(this.getAttribute("name"));
                //        console.log(this.value);
                //    }
                //    var allcheckedvalue = $(':checkbox:checked').map(function () { return this.value }).get().join('\n');//所有選中的
                //    alert(allcheckedvalue);
                //})

                //function selectAll() {
                //    for (var i = 0; i < inputs.length; i++) {
                //        inputs[i].checked = true;
                //    }
                //}
                //function unSelectAll() {
                //    for (var i = 0; i < inputs.length; i++) {
                //        inputs[i].checked = false;
                //    }
                //}


                 //$(':checkbox').click(function () {
                //    //判斷當前是否選中
                //    if (this.checked) {
                //        console.log(this.getAttribute("name"));
                //        console.log(this.value);
                //    }
                //    var allcheckedvalue = $(':checkbox:checked').map(function () { return this.value }).get().join('\n');//所有選中的
                //    alert(allcheckedvalue);
                //})

                var $checkparent = $("input[name='checkparent']");
                $checkparent.click(function () {
                    // $('input[name="checkchild"]').attr("checked", this.checked);
                    //checkparent.next('tr').find('input[name = "checkchild"']).attr("checked", this.checked);
                    //checkparent.next('input').attr("checked", this.checked);

                    //$(":input[name='checkchild']").attr("checked", this.checked);
                    //$("input[name='checkparent']").children('input[name = "checkchild"').attr("checked", this.checked);

                    var element = $(this).parents('tr').next('tr').find('input[name="checkchild"]'),
                        checked = $(this).prop("checked");

                    if (checked) {
                        element.prop("checked", checked);
                    } else {
                        element.prop("checked", checked);
                    }

                });
            })
        </script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章