jquery attr이 체크박스/선택과 같은 양식 요소를 처리할 때 발생하는 문제-JS 튜토리얼-php.cn

jquery attr이 체크박스/선택과 같은 양식 요소를 처리할 때 발생하는 문제

巴扎黑

풀어 주다： 2017-06-26 14:23:26

원래의

1482명이 탐색했습니다.

HTML 구조부터 시작해 보겠습니다

<body><form action=""><input type="checkbox" id="checkedAll">全选/全不选<br><input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="蓝球">蓝球<input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="乒乓球">乒乓球<br><input type="button" id="send" value="提交"></form></body>

로그인 후 복사

그림과 같이 프론트엔드 고급 고전 서적 [Sharp jquery]에서 attr 메소드를 사용하여 요소에 속성을 추가하여 선택 및 취소를 구현한 사례입니다. 효과.

요구 사항: 1. 아래 4개 확인란의 선택 상태를 변경하려면 모두 선택/모두 선택을 클릭하세요.

2. 선택하지 않은 항목이 있는 경우 아래 버튼을 개별적으로 클릭하면 모두 선택/모두 선택 취소 선택 해제됨 선택 상태에서 모두 선택되어 있으면 위의 전체 선택/전체 선택 해제도 자동으로 선택됩니다.

<script>"#checkedAll").on("click",

로그인 후 복사

        // 判断点击后this.checked的结果，默认未选中即为false，第一次点击则为true,第二次为false,再赋值给下面的input（此处逻辑与书上稍有不同）
        // 注意事项： 使用attr给表单元素设置选中状态时，第二个参数一定要是布尔值true/false,不能习惯性写成带引号，那就是字符串了。

로그인 후 복사

        if(this.checked){
            $("input[name=items]").attr("checked",true); 
        }else{
            $("input[name=items]").attr("checked",false);
        }
    })</script>

로그인 후 복사

문제 없이 실행되는 것 같은데, 여러 번 클릭해 보면 속성을 추가할 수는 있지만 선택한 상태는 바뀌지 않은 것을 확인할 수 있습니다.

무엇이 문제인가요?

jQuery 1.6 버전 이후에는 요소의 고유 속성 때문에 <code><strong>prop()</strong> 方法。prop()

메소드를 사용해야 합니다.

<script>$("#checkedAll").on("click",function(){
        console.log(!this.checked);if(this.checked){
            $("input[name=items]").prop("checked",true);
        }else{
            $("input[name=items]").prop("checked",false);
        }
    })</script>

로그인 후 복사

위 코드는 다음과 같이 단순화될 수도 있습니다.

<script>$("#checkedAll").on("click",function(){
        $("input").prop("checked",this.checked);
    })</script>

로그인 후 복사

🎜

위 내용은 jquery attr이 체크박스/선택과 같은 양식 요소를 처리할 때 발생하는 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!