Làm cách nào để biết nút radio nào được chọn qua jQuery?

Tôi có hai nút radio và muốn đăng giá trị của nút đã chọn. Làm cách nào tôi có thể nhận được giá trị với jQuery?

Tôi có thể có được tất cả chúng như thế này:

$("form :radio")

Làm thế nào để tôi biết cái nào được chọn?

Để lấy giá trị của mục đã chọn radioName của biểu mẫu có id myForm:

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

Đây là một ví dụ:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

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

Dùng cái này..

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

Nếu bạn đã có một tham chiếu đến nhóm nút radio, ví dụ:

var myRadio = $("input[name=myRadio]");

Sử dụng filter()chức năng, không find(). ( find()dành cho việc định vị các phần tử con / hậu duệ, trong khi filter()tìm kiếm các phần tử cấp cao nhất trong lựa chọn của bạn.)

var checkedValue = myRadio.filter(":checked").val();

Lưu ý: Câu trả lời này ban đầu đã sửa một câu trả lời khác được khuyến nghị sử dụng find(), dường như đã được thay đổi. find()vẫn có thể hữu ích cho trường hợp bạn đã có tham chiếu đến phần tử chứa, nhưng không hữu ích cho các nút radio, ví dụ:

var form = $("#mainForm");
...
var checkedValue = form.find("input[name=myRadio]:checked").val();

Điều này sẽ làm việc:

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

Lưu ý "" sử dụng xung quanh đầu vào: đã chọn và không '' như giải pháp của Peter J

Bạn có thể sử dụng bộ chọn: đã chọn cùng với bộ chọn radio.

 $("form:radio:checked").val();

Nếu bạn chỉ muốn giá trị boolean, tức là nếu nó được kiểm tra hay không, hãy thử điều này:

$("#Myradio").is(":checked")

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

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

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

radios.filter(":checked")

Một lựa chọn khác là:

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

$("input:radio:checked").val();

Đây là cách tôi sẽ viết biểu mẫu và xử lý việc nhận được radio đã kiểm tra.

Sử dụng một hình thức gọi là myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Lấy giá trị từ mẫu:

$('#myForm .radio1:checked').val();

Nếu bạn không đăng biểu mẫu, tôi sẽ đơn giản hóa hơn nữa bằng cách sử dụng:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Sau đó, nhận được giá trị được kiểm tra trở thành:

    $('.radio1:checked').val();

Có một tên lớp trên đầu vào cho phép tôi dễ dàng định kiểu đầu vào ...

Trong trường hợp của tôi, tôi có hai nút radio ở một dạng và tôi muốn biết trạng thái của từng nút. Điều này dưới đây làm việc cho tôi:

// get radio buttons value
console.log( "radio1: " +  $('input[id=radio1]:checked', '#toggle-form').val() );
console.log( "radio2: " +  $('input[id=radio2]:checked', '#toggle-form').val() );


    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggle-form">
  <div id="radio">
    <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Plot single</label>
    <input type="radio" id="radio2" name="radio"/><label for="radio2">Plot all</label>
  </div>
</form>

Trong nút radio do JSF tạo (sử dụng <h:selectOneRadio>thẻ), bạn có thể thực hiện việc này:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

trong đó selectOneRadio ID là radiobutton_id và ID mẫu là form_id .

Hãy chắc chắn sử dụng tên thay vì id , như đã chỉ ra, bởi vì jQuery sử dụng thuộc tính này ( tên được tạo tự động bởi ID điều khiển giống như JSF).

Ngoài ra, kiểm tra nếu người dùng không chọn bất cứ điều gì.

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {           
   radioanswer = $('input[name=myRadio]:checked').val();
}

Tôi đã viết một plugin jQuery để thiết lập và nhận các giá trị nút radio. Nó cũng tôn trọng sự kiện "thay đổi" trên chúng.

(function ($) {

    function changeRadioButton(element, value) {
        var name = $(element).attr("name");
        $("[type=radio][name=" + name + "]:checked").removeAttr("checked");
        $("[type=radio][name=" + name + "][value=" + value + "]").attr("checked", "checked");
        $("[type=radio][name=" + name + "]:checked").change();
    }

    function getRadioButton(element) {
        var name = $(element).attr("name");
        return $("[type=radio][name=" + name + "]:checked").attr("value");
    }

    var originalVal = $.fn.val;
    $.fn.val = function(value) {

        //is it a radio button? treat it differently.
        if($(this).is("[type=radio]")) {

            if (typeof value != 'undefined') {

                //setter
                changeRadioButton(this, value);
                return $(this);

            } else {

                //getter
                return getRadioButton(this);

            }

        } else {

            //it wasn't a radio button - let's call the default val function.
            if (typeof value != 'undefined') {
                return originalVal.call(this, value);
            } else {
                return originalVal.call(this);
            }

        }
    };
})(jQuery);

Đặt mã bất cứ nơi nào để kích hoạt addin. Sau đó hãy tận hưởng! Nó chỉ ghi đè chức năng val mặc định mà không phá vỡ bất cứ điều gì.

Bạn có thể truy cập jsFiddle này để thử nó hoạt động và xem nó hoạt động như thế nào.

Vĩ cầm

Nếu bạn có nhiều nút radio ở dạng đơn thì

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Đây là làm việc cho tôi.

 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }

Cái này hoạt động tốt

$('input[type="radio"][class="className"]:checked').val()

Trình diễn làm việc

Các :checkedselector làm việc cho checkboxes, radio buttonsvà chọn các yếu tố. Đối với chỉ các phần tử chọn, sử dụng :selectedbộ chọn.

API cho :checked Selector

Để nhận giá trị của radio đã chọn sử dụng một lớp:

$('.class:checked').val()

Tôi sử dụng kịch bản đơn giản này

$('input[name="myRadio"]').on('change', function() {
  var radioValue = $('input[name="myRadio"]:checked').val();        
  alert(radioValue); 
});

Dùng cái này:

value = $('input[name=button-name]:checked').val();

DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

Nếu bạn chỉ có 1 bộ nút radio trên 1 biểu mẫu, mã jQuery cũng đơn giản như sau:

$( "input:checked" ).val()

Tôi đã phát hành một thư viện để giúp đỡ này. Thực tế, kéo tất cả các giá trị đầu vào có thể, nhưng cũng bao gồm nút radio nào đã được kiểm tra. Bạn có thể xem thử tại https://github.com/mazondo/formalizedata

Nó sẽ cung cấp cho bạn một đối tượng js của các câu trả lời, vì vậy một dạng như:

<form>
<input type="radio" name"favorite-color" value="blue" checked> Blue
<input type="radio" name="favorite-color" value="red"> Red
</form>

sẽ cung cấp cho bạn:

$("form").formalizeData()
{
  "favorite-color" : "blue"
}

Để lấy tất cả các giá trị nút radio trong mảng JavaScript, hãy sử dụng mã jQuery sau:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();

thử nó-

var radioVal = $("#myform").find("input[type='radio']:checked").val();

console.log(radioVal);

JQuery để có được tất cả các nút radio ở dạng và giá trị được kiểm tra.

$.each($("input[type='radio']").filter(":checked"), function () {
  console.log("Name:" + this.name);
  console.log("Value:" + $(this).val());
});

Một cách khác để có được nó:

 $("#myForm input[type=radio]").on("change",function(){
   if(this.checked) {
    alert(this.value);
    }
  });

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

$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});

Từ câu hỏi này , tôi đã đưa ra một cách khác để truy cập vào lựa chọn hiện tại inputkhi bạn tham gia một clicksự kiện cho nhãn tương ứng của nó. Lý do là vì sự lựa chọn mới inputkhông được cập nhật cho đến sau labelsự kiện nhấp chuột của nó .

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

Những gì tôi cần làm là đơn giản hóa mã C #, đó là làm càng nhiều càng tốt trong JavaScript front end. Tôi đang sử dụng bộ chứa trường vì tôi đang làm việc trong DNN và nó có hình thức riêng. Vì vậy, tôi không thể thêm một hình thức.

Tôi cần kiểm tra hộp văn bản nào trong số 3 đang được sử dụng và nếu có, loại tìm kiếm là gì? Bắt đầu với giá trị, Chứa giá trị, Kết hợp chính xác của giá trị.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

Và JavaScript của tôi là:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Chỉ cần nói bất kỳ thẻ có chứa ID có thể được sử dụng. Đối với DNNers, điều này là tốt để biết. Mục tiêu cuối cùng ở đây là chuyển đến mã trung cấp những gì cần thiết để bắt đầu tìm kiếm bộ phận trong SQL Server.

Bằng cách này, tôi cũng không phải sao chép mã C # phức tạp hơn nhiều. Việc nâng vật nặng đang được thực hiện ngay tại đây.

Tôi đã phải tìm một chút cho điều này và sau đó sửa lại để làm cho nó hoạt động. Vì vậy, đối với các DNNers khác, hy vọng điều này dễ tìm thấy.