jQuery nhận giá trị của nút radio đã chọn

Báo cáo vấn đề rất đơn giản. Tôi cần xem người dùng đã chọn nút radio từ nhóm radio chưa. Mỗi nút radio trong nhóm chia sẻ cùng một id.

Vấn đề là tôi không kiểm soát được cách tạo biểu mẫu. Đây là mã mẫu về cách mã điều khiển nút radio trông như thế nào:

<input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Ngoài ra, khi chọn nút radio, nó không thêm thuộc tính "đã kiểm tra" vào điều khiển chỉ kiểm tra văn bản (tôi đoán chỉ thuộc tính được kiểm tra mà không có giá trị) . Dưới đây là cách điều khiển radio được chọn trông như thế nào

<input type="radio" checked name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

Ai có thể giúp tôi với mã jQuery có thể giúp tôi lấy giá trị của nút radio đã kiểm tra không?

Chỉ dùng.

$('input[name="name_of_your_radiobutton"]:checked').val();

Thật dễ dàng

Đầu tiên, bạn không thể có nhiều yếu tố với cùng một id. Tôi biết bạn nói rằng bạn không thể kiểm soát cách tạo biểu mẫu, nhưng ... hãy cố gắng bằng cách nào đó xóa tất cả id khỏi radio hoặc làm cho chúng trở nên độc đáo.

Để lấy giá trị của nút radio đã chọn, chọn nó theo tên với :checkedbộ lọc.

var selectedVal = "";
var selected = $("input[type='radio'][name='s_2_1_6_0']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

BIÊN TẬP

Vì vậy, bạn không có quyền kiểm soát tên. Trong trường hợp đó, tôi muốn đặt tất cả các nút radio bên trong một div, được đặt tên, giả sử radioDiv, sau đó sửa đổi một chút bộ chọn của bạn:

var selectedVal = "";
var selected = $("#radioDiv input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

Cách đơn giản nhất để có được giá trị của nút radio đã chọn như sau:

$("input[name='optradio']:checked").val();

Không có không gian nên được sử dụng ở giữa bộ chọn.

$("#radioID") // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
            var val = $(this).val(); // retrieve the value
        }
    });

Hãy chắc chắn để bọc cái này trong hàm sẵn sàng DOM ( $(function(){...});hoặc $(document).ready(function(){...});).

1. Trong mã của bạn, jQuery chỉ tìm phiên bản đầu tiên của một đầu vào có tên q12_3, trong trường hợp này có giá trị là 1. Bạn muốn một đầu vào có tên q12_3 :checked.

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

2. Lưu ý rằng mã trên không giống như sử dụng .is(":checked"). is() Hàm của jQuery trả về một boolean (đúng hoặc sai) chứ không phải là một phần tử.

<input type="radio" class="radioBtnClass" name="numbers" value="1" />1<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="2" />2<br/>
<input type="radio" class="radioBtnClass" name="numbers" value="3" />3<br/>

Điều này sẽ trở lại, kiểm tra giá trị nút radio.

if($("input[type='radio'].radioBtnClass").is(':checked')) {
    var card_type = $("input[type='radio'].radioBtnClass:checked").val();
    alert(card_type);
}

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

cho các thuộc tính lồng nhau

$("input[name='lead[gender]']:checked").val()

Đừng quên niềng răng duy nhất cho tên

Nhận tất cả các bộ đàm:

var radios = $("input[type='radio']");

Bộ lọc để có được cái đã được kiểm tra

radios.filter(":checked");

HOẶC LÀ

Một cách khác bạn có thể tìm thấy giá trị nút radio

var RadeoButtonStatusCheck = $('form input[type=radio]:checked').val();

Để nhận giá trị của Nút Radio đã chọn, hãy sử dụng RadioButtonName và Id mẫu có chứa RadioButton.

$('input[name=radioName]:checked', '#myForm').val()

HOẶC chỉ

$('form input[type=radio]:checked').val();

Kiểm tra ví dụ nó hoạt động tốt

<div class="dtl_radio">
  Metal purity : 
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="92" checked="">
    92 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="75">
    75 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="58.5">
    58.5 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="95">
    95 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="59">
    59 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="76">
    76 %
  </label>
    <label>
    <input type="radio" name="purityradio" class="gold_color" value="93">
    93 %
  </label>
   </div>

var check_value = $('.gold_color:checked').val();

Xem bên dưới để biết ví dụ làm việc với một tập hợp các nhóm radio, mỗi nhóm được liên kết với các phần khác nhau. Lược đồ đặt tên của bạn rất quan trọng, nhưng lý tưởng nhất là bạn nên thử và sử dụng lược đồ đặt tên nhất quán cho các đầu vào (đặc biệt là khi chúng nằm trong các phần như ở đây).

$('#submit').click(function(){
  var section = $('input:radio[name="sec_num"]:checked').val();
  var question = $('input:radio[name="qst_num"]:checked').val();
  
  var selectedVal = checkVal(section, question);
  $('#show_val_div').text(selectedVal);
  $('#show_val_div').show();
});

function checkVal(section, question) {
  var value = $('input:radio[name="sec'+section+'_r'+question+'"]:checked').val() || "Selection Not Made";
  return value;
}

* { margin: 0; }
div { margin-bottom: 20px; padding: 10px; }
h5, label { display: inline-block; }
.small { font-size: 12px; }
.hide { display: none; }
#formDiv { padding: 10px; border: 1px solid black; }
.center { display:block; margin: 0 auto; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="center">
  <div>
    <h4>Section 1</h4>

    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r1" value="(1:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r2" value="(1:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec1_r3" value="(1:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 2</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r1" value="(2:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r2" value="(2:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec2_r3" value="(2:3) NO"> NO</label>
  </div>

  <div>
    <h4>Section 3</h4>
    <h5>First question text</h5>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r1" value="(3:1) NO"> NO</label>
    <br/>
    <h5>Second question text</h5>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r2" value="(3:2) NO"> NO</label>
    <br/>
    <h5>Third Question</h5>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) YES"> YES</label>
    <label class="small"><input type="radio" name="sec3_r3" value="(3:3) NO"> NO</label>
  </div>
</div>


<div id="formDiv" class="center">
  <form target="#show_val_div" method="post">
    <p>Choose Section Number</p>
    <label class="small">
      <input type="radio" name="sec_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="sec_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="sec_num" value="3"> 3</label>
    <br/><br/>
    
    <p>Choose Question Number</p>
    <label class="small">
      <input type="radio" name="qst_num" value="1"> 1</label>
    <label class="small">
      <input type="radio" name="qst_num" value="2"> 2</label>
    <label class="small">
      <input type="radio" name="qst_num" value="3"> 3</label>
    <br/><br/>
    
    <input id="submit" type="submit" value="Show Value">
    
  </form>
  <br/>
  <p id="show_val_div"></p>
</div>
<br/><br/><br/>

Sử dụng mã dưới đây

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

Xin lưu ý, thuộc tính giá trị phải được xác định để có thể nhận được "Nam" hoặc "Nữ" trong kết quả của bạn.

<div id='div_container'>
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female
</div>

Hãy thử điều này với ví dụ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radio" value="first"/> 1 <br/>
<input type="radio" name="radio" value="second"/> 2 <br/>
</form>



<script>
$(document).ready(function () {
    $('#myForm').on('click', function () {
        var value = $("[name=radio]:checked").val();

        alert(value);
    })
});
</script>

Chỉ theo tên

$(function () {
    $('input[name="EventType"]:radio').change(function () {
        alert($("input[name='EventType']:checked").val());
    });
});

if (!$("#InvCopyRadio").prop("checked") && $("#InvCopyRadio").prop("checked"))
    // do something

Bạn có thể nhận giá trị của nút radio đã chọn bằng Id bằng cách sử dụng điều này trong javascript / jQuery.

$("#InvCopyRadio:checked").val();

Hy vọng điều này có thể giúp cho bạn.

Cách tốt nhất để giải thích chủ đề đơn giản này là bằng cách đưa ra ví dụ đơn giản và liên kết tham chiếu: -

Trong ví dụ sau chúng ta có hai nút radio. Nếu người dùng chọn bất kỳ nút radio nào, chúng tôi sẽ hiển thị giá trị nút radio đã chọn trong hộp cảnh báo.

Html:

<form id="Demo">
<input type="radio" name="Gender" value="Male" /> Male <br />
<input type="radio" name="Gender" value="Female" /> Female<br />
<input type="radio" name="Gender" value="others" /> others <br />
</form>

jquery: -

 $(document).ready(function(){
        $('#Demo input').on('change', function() {
            alert($('input[name="Gender"]:checked', '#Demo').val());
        });
    });

Tôi biết rằng tôi sẽ tham gia muộn. Nhưng điều đáng nói là phải mất

<label class="custom-control-label" for="myRadioBtnName">Personal Radio Button</label>

Và sau đó tôi đã kiểm tra điều này trong js của tôi. Nó có thể giống như

$(document).ready(function () { 

$("#MyRadioBtnOuterDiv").click(function(){
    var radioValue = $("input[name=myRadioButtonNameAttr]:checked").val();
    if(radioValue === "myRadioBtnName"){
        $('#showMyRadioArea').show();
    }else if(radioValue === "yourRadioBtnName"){
        $('#showYourRadioArea').show();
    }
});
});

`

<div id="subscriptions">
 Company Suscription: <input type="radio" name="subsrad" value="1">
 Customer Subscription:<input type="radio" name="subsrad" value="2">
 Manully Set:<input type="radio" name="subsrad" value="MANUAL">
 NO Subscription:<input type="radio" name="subsrad" value="0">
 </div>

và xử lý jquery để cảnh báo như đối với giá trị e được đặt / Thay đổi thông qua div id:

$("#subscriptions input") // select the radio by its id
    .on('change', function(){ // bind a function to the change event
    alert($('input[name="subsrad"]:checked', '#subscriptions').val());
            });

nó rất dễ dàng ....: -}

Một cách dễ hiểu khác ... Nó hoạt động:

Mã HTML:

 <input type="radio" name="active_status" class="active_status" value="Hold">Hold 
 <input type="radio" name="active_status" class="active_status" value="Cancel">Cancel 
 <input type="radio" name="active_status" class="active_status" value="Suspend">Suspend

Mã Jquery:

$(document).on("click", ".active_status", function () {
 var a = $('input[name=active_status]:checked').val();  
 (OR)   
 var a = $('.active_status:checked').val();
 alert(a);
});

nút radio nhiều nhóm chuyển đổi giá trị thành mảng

var arr = [];
    function r(n) {


        var section = $('input:radio[name="' + n + '"]:checked').val();
        arr[n] = section;

        console.log(arr)
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" onchange="r('b1')" class="radioID" name="b1" value="1">1
<input type="radio" onchange="r('b1')"  class="radioID" name="b1" value="2"  >2
<input type="radio" onchange="r('b1')"   class="radioID" name="b1" value="3">3

<br>

<input type="radio" onchange="r('b2')" class="radioID2" name="b2" value="4">4
<input type="radio" onchange="r('b2')"  class="radioID2" name="b2" value="5"  >5
<input type="radio" onchange="r('b2')"   class="radioID2" name="b2" value="6">6

Tôi không phải là một người javascript, nhưng tôi tìm thấy ở đây để tìm kiếm vấn đề này. Đối với những người google nó và tìm thấy ở đây, tôi hy vọng rằng điều này sẽ giúp một số. Vì vậy, như trong câu hỏi nếu chúng ta có một danh sách các nút radio:

<div class="list">
    <input type="radio" name="b1" value="1">
    <input type="radio" name="b2" value="2" checked="checked">
    <input type="radio" name="b3" value="3">
</div>

Tôi có thể tìm thấy cái nào được chọn với bộ chọn này:

$('.list input[type="radio"]:checked:first').val();

Ngay cả khi không có phần tử nào được chọn, tôi vẫn không nhận được lỗi không xác định. Vì vậy, bạn không phải viết thêm nếu câu lệnh trước khi lấy giá trị của phần tử.

Dưới đây là ví dụ jsfiddle rất cơ bản .

Dưới đây là 2 nút radio là rd1 và Radio1

<input type="radio" name="rd" id="rd1" />
<input type="radio" name="rd" id="Radio1" /> 

Cách đơn giản nhất để kiểm tra nút radio nào được kiểm tra, bằng cách kiểm tra từng cá nhân là thuộc tính (": đã kiểm tra")

if ($("#rd1").is(":checked")) {
      alert("rd1 checked");
   }
 else {
      alert("rd1 not checked");
   }

Thậm chí inputlà không cần thiết như được đề xuất bởi các câu trả lời khác. Các mã sau đây cũng có thể được sử dụng:

var variable_name = $("[name='radio_name']:checked").val();

    <input type="radio" name='s_2_1_6_0' value='Mail copy to my bill to address' id = "InvCopyRadio" onchange = 'SWESubmitForm(document.SWEForm2_0,s_4,"","1-DPWJJF")' style="height:20;width:25" tabindex=1997 >

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

HTML Code
<input id="is_verified" class="check" name="is_verified" type="radio" value="1"/>
<input id="is_verified" class="check" name="is_verified" type="radio" checked="checked" value="0"/>
<input id="submit" name="submit" type="submit" value="Save" />

Javascript Code
$("input[type='radio'].check").click(function() {
    if($(this).is(':checked')) {
        if ($(this).val() == 1) {
            $("#submit").val("Verified & Save");
        }else{
            $("#submit").val("Save");
        }
    }
});

Trong trường hợp bạn không biết tên riêng hoặc muốn kiểm tra tất cả các đầu vào radio trong một biểu mẫu, bạn có thể sử dụng var toàn cục để kiểm tra mỗi nhóm radio chỉ một lần giá trị: `

        var radio_name = "";
        $("form).find(":radio").each(function(){
            if (!radio_name || radio_name != $(this).attr('name')) {
                radio_name = $(this).attr('name');
                var val = $('input[name="'+radio_name+'"]:checked').val();
                if (!val) alert($('input[name="'+radio_name+'"]:checked').val());
            }
        });`