>웹 프론트엔드 >JS 튜토리얼 >JQuery 작업 라디오 버튼 및 확인 버튼 example_jquery

JQuery 작업 라디오 버튼 및 확인 버튼 example_jquery

WBOY
WBOY원래의
2016-05-16 17:21:431232검색

라디오 버튼과 체크 버튼은 개발 과정에서 자주 사용됩니다. 다음으로는 JQuery를 통해 라디오 버튼과 체크 버튼을 조작해보겠습니다.

라디오 버튼:

JQuery를 통해 라디오 버튼 객체를 얻는 세 가지 방법:

①ID: $("#radioId")

②NAME: $(":input[name='radioName' ]")

③TYPE: $("input[type=radio]"), 일부 정보는 다음과 같이 표시될 수 있습니다: $(""input[@type=radio]""), 이 경우 JQuery 버전과 관련이 있습니다. 이전 버전이라면 후자를 사용하고, 새 버전이라면 전자를 사용하세요. 어느 버전이 자신에게 적합한지 모르신다면 각각 하나씩 시도해 보세요. 시도해 보면 여전히 작동합니다. 지식을 배우십시오. 시도해 보는 것은 어떨까요?

그룹 내에서 라디오 버튼 하나만 활성화할 수 있다는 것은 모두가 알고 있는 사실입니다. 이 효과를 얻으려면 ID를 동일한 것으로 변경하면 된다고 생각하는 분들이 많을 것입니다. 그룹에서 여러 라디오 버튼을 선택할 수 있다는 점입니다. 이 효과를 달성하는 핵심 속성은 ID가 아니라 NAME이기 때문입니다.

소개 후에 사용법을 살펴보겠습니다.

라디오 버튼의 객체를 얻은 후에는 객체를 순회해야 합니다. 왜냐하면 이 객체의 유형이 배열이기 때문입니다. 하나씩 선택되었는지 판단한 후 선택된 버튼에서 필요한 값을 꺼내면 됩니다. 샘플 코드는 다음과 같습니다.

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

var itemradio = $("input[type=radio]")
result=""
nums = itemradio .length;
for(i=0;iif(itemradio[i].checked){
result = itemradio[i].value "," itemradio[i] .id " ;" result;
}
}

result는 내가 얻고자 하는 값입니다. 앞의 값은 누구나 이해할 수 있지만 뒤의 ID는 헷갈릴 수 있습니다. 어떤 사람들. 여기서는 확장하겠습니다. JS의 모든 객체는 "."을 통해 속성 값을 직접 얻을 수 있습니다.

체크박스:

체크박스에 관해서는 "모두 선택 및 역선택" 효과만 있으면 JQuery를 사용하여 간단히 수행할 수 있습니다. 한 문장으로
코드 복사 코드는 다음과 같습니다.

varcheckObj = $('input:checkbox[ name="checkbox"]:checked');
var 값 ​​= ""
checkedObj.each(function() {
var value=this.value " ,";
values ​​​​= value ;
});

좋아, 위의 두 코드로 체크박스와 라디오 버튼을 작동할 수 있습니다!
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.