집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 확인란이 선택되었는지 확인하고 질문에 답하기 위해 특수 효과를 수행합니다.

jquery는 확인란이 선택되었는지 확인하고 질문에 답하기 위해 특수 효과를 수행합니다.

WBOY원래의: 2016-05-16 15:26:471392검색

이 기사의 예에서는 확인란이 선택되었는지 확인하고 답변을 묻는 jquery의 특수 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

1. 구현 원칙:

1단계: 사용자가 어떤 항목을 선택했는지, 즉 어떤 확인란이 선택되었는지 확인

2단계: 확인란 선택에 따라 해당 프롬프트 제공

2. 메인 프로그램을 살펴보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="checkbox" id="checkbox01" />A <br />
    <input type="checkbox" id="checkbox02" />B <br />
    <input type="checkbox" id="checkbox03" />C <br />
    <input type="checkbox" id="checkbox04" />D <br />
    <input type="button" id="button" value="提交" />
    <h4 >提示本题是单选题且正确答案是A</h4>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

위에서 볼 수 있듯이 이 질문은 객관식 질문이고 정답은 A라고 가정하고 JQ를 사용하여 구현하겠습니다~~~

3. jQuery 프로그램

$(function(){
  //假设正确答案是A
  $("#button").click(function(){
    if($("input").filter(":checked").length==0){
      alert("请选择一个选项再提交");
    }else if($("#checkbox01").filter(":checked").length!=0&&$("#checkbox02").filter(":checked").length==0&&$("#checkbox03").filter(":checked").length==0&&$("#checkbox04").filter(":checked").length==0){
      alert("您选择的答案是正确的！")
    }else{
      alert("您选择的答案是错误的！")
    }
  })
})

체크박스 선택 여부를 결정하는 프로그램을 인터넷에서 많이 본 적이 있는데, 테스트해 본 결과 대부분은 프로그램을 삭제하는 jquery 버전 업데이트로 인해 발생하는 것으로 보입니다. $("#id ").filter(":checked").length==0을 사용했습니다. 어떤 옵션이 선택되고 테스트되었는지 확인할 수 있습니다.

이 기사가 jQuery 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery_jquery에서 serializeArray()와 serialize()의 차이점 분석 예다음 기사：jQuery_jquery에서 serializeArray()와 serialize()의 차이점 분석 예

jquery는 확인란이 선택되었는지 확인하고 질문에 답하기 위해 특수 효과를 수행합니다.

관련 기사