질문에 대한 답변을 위해 확인란이 선택되었는지 여부를 jQuery를 기반으로 구현합니다.-JS 튜토리얼-php.cn

질문에 대한 답변을 위해 확인란이 선택되었는지 여부를 jQuery를 기반으로 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:26:17

원래의

1282명이 탐색했습니다.

최근 프로젝트 요구 사항에서 만난 기능 포인트는 사용자가 선택한 옵션에 따라 해당 프롬프트가 제공됩니다. 테스트 프로그램의 렌더링은 매우 만족스러운지 확인하기 위해 제공됩니다. 전체 내용을 보려면 계속하세요.

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("请选择一个选项再提交");
}elsif($("#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를 기반으로 체크박스 선택 여부를 묻는 관련 정보를 구현한 것입니다.