는 jQuery를 내가 jQuery를 사용하고 혼란

Question

을에서는 event.preventDefault. 라디오 버튼을 선택하지 않으면 검색 버튼을 클릭에

는 다른 작업을 할 alert("enter the field") 표시됩니다 확인하는 플래그를 사용 ... 그리고 또한 나는 실제로 내가 사용하는 라디오 버튼을 사용하고 여기에 event.preventDefault();

을 사용 남성과 여성의 두 가지 옵션이 포함 된 성별 레이블입니다. 이제 문제는 남자 라디오 버튼이나 여자를 확인했을 때입니다. 아직도 필드에 들어가는 것을 보여주고 있습니다.

$('#searchbutton').click(function(event){ 

    alert("ZZ"); 

    var flag3=0; 
    if ($('#gender').is(":not(:checked)")) 
    { 
     flag3=1; 
    } 
    if(flag3==1) 
     alert("Select the field first"); 
    event.preventDefault(); 

}); 

<input type="radio" name="gender" id="gender" value="male" /> Male<br /> 
<input type="radio" name="gender" id="gender" value="female" /> Female 
<input type="submit" name="searchbutton" value="Search" id="searchbutton"> 

Answer 1

당신은 당신의 코드에서 몇 가지 문제가있다 :이 부분 여기 if($('#gender').is(":not(:checked)"))

내 코드가에 문제가있을 생각합니다.

• ID 만 HTML 문서에서 한 번만 사용할 수 있습니다. #gender을 두 번 사용했습니다.
• 당신은 당신은 단순히 if를 실행할 수 있습니다, 다른 플래그 변수를 사용할 필요가 없습니다. 두 번째에서
• 는 if 당신은 따라서 preventDefault 항상 실행, {} 브라켓을 사용하지 않았습니다.

  <input type="radio" name="gender" value="male" /> Male<br /> 
  <input type="radio" name="gender" value="female" /> Female 
  <input type="submit" name="searchbutton" value="Search" id="searchbutton"> 
  

  와 jQuery를 :

  $('#searchbutton').click(function(event){ 
      if ($('input[name="gender"]:checked').length < 1) { 
       alert("Select the field first"); 
       event.preventDefault(); 
      } 
  }); 
  

  Working Demo

  설명 : 나는 당신을 제안

는 다음과 같이 수행 attribute selector이 input의 그 name이 일치합니다 gender하고 :checked 선택에만 체크 사람을 선택합니다. 그런 다음 length을 사용하여 일치하는 요소의 수를 확인할 수 있습니다. 0이면 사용이 옵션을 선택하지 않은 것입니다.

내가 이해에서

Answer 2

, 당신은 확실히 사용자 성별에 선택을하게 만들려고 노력하고 있습니다.

즉각적인 문제는 모두 <input type="radio">의 ID가 동일하다는 것입니다. 그들에게 동일한 이름을주고 적절한 동안, 당신은 두 가지 요소가 동일한 ID을주지 않을 .

또한 라디오 버튼이 선택되어 있는지 확인해야합니다. 위의 코드를 작성하는 방법은 다음과 같습니다.

$('#searchbutton').click(function (e) { 
    if ($(':radio:checked[name="gender"]').length == 0) { 
     alert("Select the field first"); 
     e.preventDefault(); 
    } 
});