jquery attr이 체크박스/선택과 같은 양식 요소를 처리할 때 발생하는 문제
- 巴扎黑원래의
- 2017-06-26 14:23:261420검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.