JQuery 학습(4) 전체 선택 반전 기능의 실현

6622 단어
$(function () {
            $('#chkall').click(function () {
                /*if ($(this).is(':checked') == true) {
                $('table input[type=checkbox]').attr('checked', true);
                }
                else {
                $('table input[type=checkbox]').attr('checked', false);
                }*/
                // 
                $('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
                if (this.checked) {
                    $('#sp1').text(' ');
                }
                else {
                    $('#sp1').text(' ');
                }

 


                //alert($('#chkall').attr('checked'));
                // , js 
                //$('table input[type=checkbox]').attr('checked',this.checked);
            })
            $('#chkrevert').click(function () {
                // 1:
                /*var allcheck = $('table input[type=checkbox]');
                for (var i = 0; i < allcheck.length; i++) {
                if (allcheck[i].checked) {
                allcheck[i].checked = false;
                }
                else {
                allcheck[i].checked = true;
                }
                }*/

                var allcheck = $('table input[type=checkbox]');
                allcheck.each(function () {
                    if ($(this).is(':checked')) {
                        $(this).attr('checked', false);
                    }
                    else {
                        $(this).attr('checked', true);
                    }
                })
            })

 
  <input id="chkall" type="checkbox" /><span id="sp1"> </span><input id="chkrevert" type="checkbox" /> </div>
    <table>
        <tr>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" />
            </td>
            <td>
                001
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/2.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                002
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/3.jpg" />
            </td>
            <td>
                40
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                003
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/4.jpg" />
            </td>
            <td>
                50
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" />
            </td>
            <td>
                004
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/5.jpg" />
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" />
            </td>
            <td>
                005
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/6.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox6" type="checkbox" />
            </td>
            <td>
                006
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                <img src="images/7.jpg" />
            </td>
            <td>
                35
            </td>
        </tr>
    </table>

좋은 웹페이지 즐겨찾기