[javascript] jQuery에서 이름이 모두 같은 경우 라디오 버튼의 값을 어떻게 얻습니까?

내 코드는 다음과 같습니다.

<table>
   <tr>
      <td>Sales Promotion</td>
      <td><input type="radio" name="q12_3" value="1">1</td>
      <td><input type="radio" name="q12_3" value="2">2</td>
      <td><input type="radio" name="q12_3" value="3">3</td>
      <td><input type="radio" name="q12_3" value="4">4</td>
      <td><input type="radio" name="q12_3" value="5">5</td>
   </tr>
</table>
<button id="submit">submit</button>

다음은 JS입니다.

$(function(){
    $("#submit").click(function(){
        alert($('input[name=q12_3]').val());
    });
 });

여기 JSFIDDLE입니다 ! 버튼을 클릭 할 때마다 1이 반환됩니다. 이유는 무엇입니까? 누구든지 나를 도울 수 있습니까?

답변

코드에서 jQuery는 name이있는 입력의 첫 번째 인스턴스 만 찾습니다 q12_3.이 경우 값은 1. 당신은 이름을 입력합니다 q12_3입니다 :checked.

$("#submit").click(() => {
  const val = $('input[name=q12_3]:checked').val();
  alert(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

스 니펫 확장

위의 코드 는를 사용하는 것과 동일 하지 않습니다.is(":checked") . jQuery의 is()함수는 요소 (들)가 아닌 부울 (true 또는 false)을 반환합니다.

이 답변이 계속 많은 관심을 받고 있기 때문에 바닐라 JavaScript 스 니펫도 포함하겠습니다.

document.querySelector("#submit").addEventListener("click", () => {
  const val = document.querySelector("input[name=q12_3]:checked").value;
  alert(val);
});

<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

스 니펫 확장

답변

선택기에서 확인 된 라디오 버튼을 지정해야합니다.

$(function(){
    $("#submit").click(function(){
        alert($('input[name=q12_3]:checked').val());
    });
 });

답변

선택기를 변경할 수 있습니다.

$('input[name=q12_3]:checked').val()

답변

또 다른 방법이 있습니다. 아래 코드를 시도하십시오

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});

답변

$('input:radio[name=q12_3]:checked').val();

답변

데모 : https://jsfiddle.net/ipsjolly/xygr065w/

$(function(){
    $("#submit").click(function(){
        alert($('input:radio:checked').val());
    });
 });

답변

이 스크립트 사용

$('input[name=q12_3]').is(":checked");