it-swarm-vi.com

Làm cách nào để kiểm tra nút radio với jQuery?

Tôi cố gắng kiểm tra một nút radio với jQuery. Đây là mã của tôi:

<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>

Và JavaScript: 

jQuery("#radio_1").attr('checked', true);

Không hoạt động:

jQuery("input[value='1']").attr('checked', true);

Không hoạt động:

jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true);

Không hoạt động:

Bạn có ý tưởng khác không? Tôi đang thiếu gì?

782
Alexis

Đối với các phiên bản jQuery bằng hoặc cao hơn (> =) 1.6, hãy sử dụng:

$("#radio_1").prop("checked", true);

Đối với các phiên bản trước (<) 1.6, hãy sử dụng:

$("#radio_1").attr('checked', 'checked');

Mẹo: Bạn cũng có thể muốn gọi click() hoặc change() trên nút radio sau đó. Xem bình luận để biết thêm.

1324
Mike Thomsen

Thử đi.

Trong ví dụ này, tôi đang nhắm mục tiêu nó với tên và giá trị đầu vào của nó

$("input[name=background][value='some value']").prop("checked",true);

Điều cần biết: trong trường hợp giá trị nhiều từ, nó cũng sẽ hoạt động vì dấu nháy đơn.

216
Vladimir Djuricic

Thêm một hàm prop () được thêm vào trong jQuery 1.6, phục vụ cho cùng một mục đích.

$("#radio_1").prop("checked", true); 
93
Umesh Patil

Tùy chọn ngắn và dễ đọc:

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

Nó trả về true hoặc false, vì vậy bạn có thể sử dụng nó trong câu lệnh "if".

75
Karbaman

Thử đi.

Để kiểm tra nút Radio bằngGiá trịsử dụng nút này.

$('input[name=type][value=2]').attr('checked', true); 

Hoặc là

$('input[name=type][value=2]').attr('checked', 'checked');

Hoặc là

$('input[name=type][value=2]').prop('checked', 'checked');

Để kiểm tra nút Radio bằngIDsử dụng nút này.

$('#radio_1').attr('checked','checked');

Hoặc là

$('#radio_1').prop('checked','checked');
28
Lakshmana Kumar

Cách $.prop tốt hơn:

$(document).ready(function () {                            
    $("#radio_1").prop('checked', true);        
});

và bạn có thể kiểm tra nó như sau:

$(document).ready(function () {                            
    $("#radio_1, #radio_2", "#radio_3").change(function () {
        if ($("#radio_1").is(":checked")) {
            $('#div1').show();
        }
        else if ($("#radio_2").is(":checked")) {
            $('#div2').show();
        }
        else 
            $('#div3').show();
    });        
});
12
Amin Saqi

Thử đi:

$("input[name=type]").val(['1']);

http://jsfiddle.net/nwo706xw/

9
user4457035

Bạn phải làm 

jQuery("#radio_1").attr('checked', 'checked');

Đó là thuộc tính HTML

8
JohnP

Vâng, nó làm việc cho tôi như một cách:

$("#radio_1").attr('checked', 'checked');
5
Anjan Kant

Nếu thuộc tính name không hoạt động, đừng quên rằng id vẫn tồn tại. Câu trả lời này dành cho những người muốn nhắm mục tiêu id ở đây bạn làm như thế nào.

$('input[id=element_id][value=element_value]').prop("checked",true);

Bởi vì tài sản name không hoạt động đối với tôi. Hãy chắc chắn rằng bạn không bao quanh idname với các trích dẫn kép/đơn.

Chúc mừng!

5
Anjana Silva

Chúng ta nên nói với nó là nút radio. Vì vậy, hãy thử với mã sau đây.

$("input[type='radio'][name='userRadionButtonName']").prop('checked', true);
4
UWU_SANDUN

Chỉ trong trường hợp bất kỳ ai đang cố gắng đạt được điều này trong khi sử dụng jQuery UI, bạn cũng sẽ cần làm mới đối tượng hộp kiểm UI để phản ánh giá trị được cập nhật:

$("#option2").prop("checked", true); // Check id option2
$("input[name='radio_options']").button("refresh"); // Refresh button set
4
freeworlder
$("input[name=inputname]:radio").click(function() {
    if($(this).attr("value")=="yes") {
        $(".inputclassname").show();
    }
    if($(this).attr("value")=="no") {
        $(".inputclassname").hide();
    }
});
4
Eray

Thử đi

var isChecked = $("#radio_1")[0].checked;
3
user2190046

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>
3
saroj

Nhận giá trị:

$("[name='type'][checked]").attr("value");

Đặt giá trị: 

$(this).attr({"checked":true}).prop({"checked":true});

Nút Radio bấm thêm attr đã kiểm tra:

$("[name='type']").click(function(){
  $("[name='type']").removeAttr("checked");
  $(this).attr({"checked":true}).prop({"checked":true});
});
3
Naim Serin

Thử đi

$(document).ready(function(){
    $("input[name='type']:radio").change(function(){
        if($(this).val() == '1')
        {
          // do something
        }
        else if($(this).val() == '2')
        {
          // do something
        }
        else if($(this).val() == '3')
        {
          // do something
        }
    });
});
2
Jordan Jelinek

Tôi đã nhận được một số ví dụ liên quan để cải thiện, nếu tôi muốn thêm một điều kiện mới, giả sử, nếu tôi muốn bảng màu bị ẩn sau khi tôi nhấp vào giá trị Trạng thái dự án ngoại trừ Pavers và Paving Slabs.

Ví dụ ở đây:

$(function () {
    $('#CostAnalysis input[type=radio]').click(function () {
        var value = $(this).val();

        if (value == "Supply & Lay") {
            $('#ul-suplay').empty();
            $('#ul-suplay').append('<fieldset data-role="controlgroup"> \

http://jsfiddle.net/m7hg2p94/4/

2
azim hamdan

Tôi sử dụng mã này:

Tôi xin lỗi vì tiếng anh.

var $j = jQuery.noConflict();

$j(function() {
    // add handler
    $j('#radio-1, #radio-2').click(function(){

        // find all checked and cancel checked
        $j('input:radio:checked').prop('checked', false);

        // this radio add cheked
        $j(this).prop('checked', true);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="section">
  <legend>Radio buttons</legend>
  <label>
    <input type="radio" id="radio-1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
  <br>
  <label>
    <input type="radio" id="radio-2">
    Option two can be something else
  </label>
</fieldset>

2
volitilov
function rbcitiSelction(e) {
     debugger
    $('#trpersonalemail').hide();
    $('#trcitiemail').show();
}

function rbpersSelction(e) {
    var personalEmail = $(e).val();
    $('#trpersonalemail').show();
    $('#trcitiemail').hide();
}

$(function() {  
    $("#citiEmail").prop("checked", true)
});
1
MadhaviLatha Bathini

Một số lần giải pháp trên không hoạt động, sau đó bạn có thể thử bên dưới:

jQuery.uniform.update(jQuery("#yourElementID").attr('checked',true));
jQuery.uniform.update(jQuery("#yourElementID").attr('checked',false));

Một cách khác bạn có thể thử là:

jQuery("input:radio[name=yourElementName]:nth(0)").attr('checked',true);
1
Pankaj Bhagwat

Tôi vừa gặp một vấn đề tương tự, một giải pháp đơn giản là chỉ sử dụng:

.click()

Bất kỳ giải pháp nào khác sẽ hoạt động nếu bạn làm mới radio sau khi gọi chức năng.

1
user3148673

thử đi 

 $("input:checked", "#radioButton").val()

nếu được chọn trả về True nếu không được kiểm tra sẽ trả về False

jQuery v1.10.1
1
pst

Tôi đã sử dụng jquery-1.11.3.js

Bật và tắt cơ bản

Mẹo 1: (Loại nút vô tuyến phổ biến Tắt & Bật)

$("input[type=radio]").attr('disabled', false);
$("input[type=radio]").attr('disabled', true); 

Mẹo 2: (Bộ chọn ID Sử dụng prop () hoặc attr ())

$("#paytmradio").prop("checked", true);
$("#sbiradio").prop("checked", false);

jQuery("#paytmradio").attr('checked', 'checked'); // or true this won't work
jQuery("#sbiradio").attr('checked', false);

Mẹo 3: (Bộ chọn lớp Sử dụng prop () hoặc arrt ())

$(".paytm").prop("checked", true);
$(".sbi").prop("checked", false);

jQuery(".paytm").attr('checked', 'checked'); // or true
jQuery(".sbi").attr('checked', false);

MIPSO KHÁC

$("#paytmradio").is(":checked")   // Checking is checked or not
$(':radio:not(:checked)').attr('disabled', true); // All not check radio button disabled

$('input[name=payment_type][value=1]').attr('checked', 'checked'); //input type via checked
 $("input:checked", "#paytmradio").val() // get the checked value

index.html

<div class="col-md-6">      
    <label class="control-label" for="paymenttype">Payment Type <span style="color:red">*</span></label>
    <div id="paymenttype" class="form-group" style="padding-top: inherit;">
        <label class="radio-inline" class="form-control"><input  type="radio" id="paytmradio"  class="paytm" name="paymenttype" value="1" onclick="document.getElementById('paymentFrm').action='paytmTest.php';">PayTM</label>
        <label class="radio-inline" class="form-control"><input  type="radio" id="sbiradio" class="sbi" name="paymenttype" value="2" onclick="document.getElementById('paymentFrm').action='sbiTest.php';">SBI ePAY</label>
    </div>
</div>
0
venkatSkpi

Trong trường hợp bạn không muốn bao gồm một thư viện lớn như jQuery cho một cái gì đó đơn giản, thì đây là một giải pháp thay thế sử dụng các phương thức DOM tích hợp:

// Check checkbox by id:
document.querySelector('#radio_1').checked = true;

// Check checkbox by value:
document.querySelector('#type > [value="1"]').checked = true;

// If this is the only input with a value of 1 on the page, you can leave out the #type >
document.querySelector('[value="1"]').checked = true;
<form>
    <div id='type'>
        <input type='radio' id='radio_1' name='type' value='1' />
        <input type='radio' id='radio_2' name='type' value='2' />
        <input type='radio' id='radio_3' name='type' value='3' /> 
    </div>
</form>
0
CertainPerformance

Ngoài ra, bạn có thể kiểm tra xem phần tử có được kiểm tra hay không:

if ($('.myCheckbox').attr('checked'))
{
   //do others stuff
}
else
{
   //do others stuff
}

Bạn có thể kiểm tra phần tử không được kiểm tra:

$('.myCheckbox').attr('checked',true) //Standards way

Bạn cũng có thể bỏ chọn theo cách này:

$('.myCheckbox').removeAttr('checked')

Bạn có thể kiểm tra nút radio:

Đối với các phiên bản jQuery bằng hoặc cao hơn (> =) 1.6, hãy sử dụng:

$("#radio_1").prop("checked", true);

Đối với các phiên bản trước (<) 1.6, hãy sử dụng:

$("#radio_1").attr('checked', 'checked');
0
Majedur Rahaman

attr chấp nhận hai chuỗi.

Cách chính xác là:

jQuery("#radio_1").attr('checked', 'true');
0
Iuri Matos

Thử đi:

$(document).ready(function(){
  $("#Id").prop("checked", true).checkboxradio('refresh');
});
0
user3721473
$("#radio_1").attr('checked', true);
//or
$("#radio_1").attr('checked', 'checked');
0
dominicbri7

Đáng ngạc nhiên, câu trả lời phổ biến nhất và được chấp nhận bỏ qua kích hoạt sự kiện thích hợp bất chấp các ý kiến. Đảm bảo bạn gọi .change(), nếu không, tất cả các ràng buộc "thay đổi" sẽ bỏ qua sự kiện này.

$("#radio_1").prop("checked", true).change();
0
apatsekin

attr chấp nhận hai chuỗi.

Cách chính xác là:

jQuery("#radio_1").attr('checked', 'true');
0
Koko Monsef