使用jQuery单击选择单选按钮

Question

I'm trying to select a radio button on click with jQuery. I can't seem to get this to work though. Here is my current attempt.

JS

$(document).ready(function() {
  $("#payment").click(function(event) {
    event.preventDefault()
    $("input:radio[name=slug_tier_1]").attr("checked", true)
  })
});

HTML

  <label class="plans__tier-1__actions">
    <%= radio_button_tag "slug", "tier_1", required: true %>
    <a href="#" class="button" id="payment">Select</a>
  </label>

Screenshot of name

This seems as though it should work? Any thing jump out at you?

Answer 1

<a class="btn">button</a>
<input type="radio" class="radio">

$(".btn").click(function(){
    $(".radio").prop("checked", true);
});

Answer 2

 $("input[type='radio'][name='slug_tier_1']").attr("checked", true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="slug_tier_1"> 

If the name of the input is the same in the rendered HTML, the selector should be

$("input[type='radio'][name='slug_tier_1']").attr("checked", true);

The type should be given like any other attribute in [] .Also the name should be enclosed in quotes. See link

From RoR Docs

radio_button_tag 'gender', 'male'
# => <input id="gender_male" name="gender" type="radio" value="male" />

So in this case the name should be just slug . slug_tier_1 is the ID of the element.

Either try

$("input[type='radio'][id='slug_tier_1']").attr("checked", true);

Or

$("input[type='radio'][name='slug']").attr("checked", true);

Answer 3

Your code looks fine. Try this and check in console. There might be multiple elements of same ids

$(document).ready(function() {
  console.log($("#payment"));
  $("#payment").click(function(event) {
    console.log($("input:radio[name=slug_tier_1]"));
  })
});

Check if it returns a single element or multiple elements for both #payment or $("input:radio[name=slug_tier_1]")

Try and Reply