jquery 전체 선택/전체 선택 취소 (거꾸로 선택)/단일 선택 작업
jquery 버전: 2.0
HTML 코드를 먼저 보세요. 간단한 조작 상자입니다.
</head>
<body>
<div>
<input id="checkAll" type="checkbox" />
<input name="subBox" type="checkbox" /> 1
<input name="subBox" type="checkbox" /> 2
<input name="subBox" type="checkbox" /> 3
<input name="subBox" type="checkbox" /> 4
</div>
</body>
</html>jquery 라이브러리 가져오기
<scriptsrc="/static/js/jquery-2.0.3.min.js"></script>checkbox에 대한 선택은 실제적으로 하나의 속성을 추가한 것입니다: checked,value에 값이 있든 없든 모두 선택 상태입니다. 프로그램에서 checked 값이 선택되면true이고 존재하지 않으면false입니다.
<scripttype="text/javascript">
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox "]'). attr ("checked",this.checked);
});
var$sub = $("input[name=' subBox ']");
$sub.click(function(){
$("#checkAll").attr("checked",$sub.length==$("input[name='subBox']:checked").length ? true : false);
});
});
</script>이 코드는 처음에는 전체적으로 선택할 수 있지만, 뒤에는 효과가 없습니다. $('input [name ='subBox'])attr ("checked",this.checked) 의 값은undefined입니다. 원본 코드에 이 속성이 없기 때문입니다.
jquery의api 매뉴얼을 보고 prop 함수를 발견했습니다:
다음 함수는 jquery 공식api에서 응용된 것을 설명한다.
prop(name|properties|key,value|fn)
개술
일치하는 원소가 집중된 첫 번째 원소의 속성 값을 가져옵니다.
일부 내장된 속성의 DOM 요소나 window 객체에서 해당 속성을 삭제하려고 하면 브라우저에서 오류가 발생할 수 있습니다.jQuery가 처음으로 undefined 값의 속성을 분배했는데 브라우저에서 발생한 오류를 무시했습니다
매개 변수
name
속성 이름
properties
속성의 이름/값 쌍 객체
key,value
속성 이름, 속성 값
key,function(index, attr)
1: 속성 이름입니다.
2: 속성 값의 함수를 되돌려줍니다. 첫 번째 파라미터는 현재 요소의 인덱스 값이고 두 번째 파라미터는 원래의 속성 값입니다.
상기 함수 설명은 jquery 공식api에서 응용된 것이다.
prop () 는 일치하는 요소의 속성 값을 가져옵니다.
이 방법은 jquery 1.6 이후에 나온 것으로 이전의 것을 구별하는 데 쓰인다.attr() 방법.
가장 큰 차이점은 볼형의 속성이다. 1.6 이후에는 모두 사용된다.prop () 방법만 있으면 됩니다.
이 부울형의 속성은 다시 한 번 설명하자면 속성 값은true|false만 있는 속성입니다.
속성 이름만 추가하고 속성 값을 쓰지 않아도 효력이 발생하는 경우도 있다.prop () 방법입니다.예를 들어 checked,disable 같은 것들은 사실 그것들은 도대체 볼형의 속성에 속한다고 말한다.
1. 속성 명칭을 추가하면 이 속성이 효력이 발생합니다.prop()를 사용해야 합니다.
2.true가 있고false 두 속성은prop()를 사용합니다.
3. 기타는attr()를 사용한다.
위의 코드는 attr를 prop으로 바꿉니다.
<scripttype="text/javascript">
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox "]').prop("checked",this.checked);
});
var$sub = $("input[name=' subBox ']");
$sub.click(function(){
$("#checkAll").prop("checked",$sub.length== $("input[name=' subBox ']:checked").length ? true : false);
});
});
</script>이렇게 수정한 후에 정상이 되었다
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
