Javascript는 확인란 선택 attribute_javascript 기술을 구현합니다.

웹 프론트엔드 개발에 익숙한 사람이라면 체크박스 선택 여부를 판단하는 일이 흔히 하는 일이라는 것을 알겠지만, 판단하는 방법에는 여러 가지가 있지만 개발 과정에서 이러한 방법의 호환성을 무시하는 경우가 많습니다. 효과가 달성됩니다. 저는 블로거로서 여러 가지 방법을 사용하곤 했는데, 구글에서 이것저것 안 좋은 글을 자주 발견하고 나중에는 헷갈리곤 했습니다. 오늘 우연히 외국 블로그를 봤는데 설명이 너무 잘 되어 있는 것 같아서 중국어로 번역해서 제 의견도 좀 추가할 예정입니다.

웹 개발에 종사하고 있고 개발하는 웹 페이지에 확인란이 있는 경우 현재 확인란이 선택되어 있는지 확인한 다음 일부 조건문을 실행해야 할 수 있습니다. 확인란이 선택되어 있는지 확인하는 방법에는 여러 가지가 있습니다.

먼저 네이티브 자바스크립트가 이 속성을 어떻게 결정하는지 살펴보겠습니다. 자바스크립트에서는 요소를 선택한 후 해당 요소의 selected 속성을 통해 선택한 체크박스의 체크 여부를 쉽게 확인할 수 있습니다.

다음과 같이 페이지에 체크박스가 있고 체크박스에는 myCheckBox와 같은 고유 ID가 있는 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

이제 먼저 자바스크립트를 통해 이 요소를 선택한 다음 확인된 속성을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

함수 checkCheckBox() {
If (document.getElementById('myCheckBox').checked) {
                    //콘솔로 작업하지 않는 경우 경고('확인됨')로 변경합니다.
console.log('확인됨');
         } else {
console.log('아니요, 체크되지 않았습니다');
}
}

보시다시피, 먼저 ID로 요소를 선택한 다음 체크박스를 선택하면 해당 값이 true가 되고, 체크박스를 선택하지 않으면 해당 값은 false가 됩니다.

jQuery를 사용하고 있고 이러한 판단을 내리기 위해 기본 자바스크립트를 사용하고 싶지 않은 경우 다음과 같은 여러 가지 방법이 있습니다.

사용 is(':checked')

이 사용법에서는 jQuery의 is() 함수를 사용합니다. 이 함수의 기능은 선택한 요소 또는 요소 컬렉션이 함수에 전달한 조건 매개변수를 충족하는지 확인하는 것입니다. 조건이 충족되면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

따라서 이 기능을 사용하려면 요소를 선택한 다음 선택기:checked의 값을 확인해야 합니다. 이 선택기는 체크박스, 라디오 버튼 및 선택 태그에 대해 작동합니다.

[/코드]
$('input[type="button"]').click(함수 () {
If ($('#myCheckBox').is(':checked')) {
                    //콘솔로 작업하지 않는 경우 경고('확인됨')로 변경합니다.
console.log('확인됨');
         } else {
console.log('아니요, 체크되지 않았습니다');
}
});
[/코드]

prop() 사용

jQuery 1.6 이전에는 attr() 함수를 사용하여 요소의 속성과 속성을 가져왔지만 매우 혼란스러웠습니다. 따라서 jQuery 1.6 이후에는 요소의 현재 속성 값을 얻기 위해 새로운 함수 prop()이 사용됩니다.

하지만 그 전에 먼저 속성과 속성의 차이점을 이해해야 합니다. 속성은 HTML 태그에 대해 설정하는 일부 속성 값입니다. 여기에는 태그에 대해 설정한 클래스 및 ID는 물론 입력 상자에 대해 설정한 초기 값도 포함됩니다. 태그에 속성값을 설정하지 않고 attr()을 통해 속성값을 얻으면 undefine이 발생합니다. prop()은 요소의 속성 값을 얻는 데에도 사용되지만 attr()과의 명백한 차이점은 얻으려는 속성이 html 태그에 정의되어 있지 않더라도 여전히 필요한 현재 속성을 올바르게 반환할 수 있다는 것입니다. 값.

공식 권장 사항에 따르면 true와 false의 두 가지 속성(예: 확인됨, 선택됨 또는 비활성화됨)이 있는 속성은 prop()을 사용하고 다른 속성은 attr()을 사용합니다.

두 가지의 차이점을 직관적으로 반영하기 위해 페이지가 로드된 직후 입력 상자의 값을 변경하면 됩니다. 이때 입력 상자의 값이 변경되더라도 attr을 사용하는 것을 알 수 있습니다. ()를 사용하여 속성 값을 얻으면 텍스트가 변경되어도 속성 값이 변경되지 않지만 property()를 통해 얻은 속성 값은 텍스트 상자의 내용이 변경됨에 따라 변경됩니다.

예를 들어 보면 초기 값 세트와 일부 속성 세트가 있는 입력 상자가 있습니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 JQuery 코드에 다음과 같이 작성합니다.

코드 복사 코드는 다음과 같습니다.

console.log('속성 값: ' $('#myTextBox').attr('value'));
console.log('속성 값은 ' $('#myTextBox').prop('value'));

prop()를 통해 얻은 입력 상자의 값은 항상 그 값과 동기화되는 반면 attr()을 통해 얻은 입력 상자의 값은 항상 html 태그에 설정되어 있음을 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('input[type="button"]').click(함수 () {
Alert('속성 값은 ' $('#myTextBox').attr('value'));
Alert('속성 값은 ' $('#myTextBox').prop('value'));
});

필터 사용:선택됨

var isChecked = $('#myCheckBox:checked').length > 이 속성의 값을 판단하는 또 다른 방법은 요소를 선택할 때 필터를 추가한 다음, 얻은 요소의 길이를 기준으로 요소의 속성을 판단하는 것입니다. 그러나 이 사용법은 권장되지 않습니다. 페이지에 체크박스 그룹이 많고 ID 선택기 대신 클래스 선택기를 사용하면 잘못된 답변을 얻을 수 있기 때문입니다.

코드 복사 코드는 다음과 같습니다.

$('input[type="button"]').click(함수 () {
If ($('#myCheckBox:checked').length > 0 ) {
//콘솔로 작업하지 않는 경우에는 경고('Its Checked')로 변경하세요.
console.log('확인됨');
} 그 밖의 {
console.log('아니요, 체크되지 않았습니다');
}
});

체크 항목의 선택된 속성을 얻는 방법에는 여러 가지가 있음을 알 수 있습니다. 이것이 바로 웹 개발자가 올바른 사용 방법을 선택할 때 자주 사용하고 혼동해야 하는 사항입니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

잠시 시간을 내어 기사를 친구들과 공유하거나 댓글을 남겨주세요. 여러분의 지원에 진심으로 감사드립니다!