CODEWITHSUNDEEP
javascriptjquery
Desiigner
Desiigner

Reputation: 2336

Click event on input type 'radio' jQuery

Cannot assign an event to a radio button. I've googled this question and there were a lot of different solutions but nothing helps.

The last solution I tried was:

$(document).ready(function() {
  $("#monthly input[name=pricing-1]").click(function() {
    console.log("Test");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-round btn-outline-primary w-150 active">
        <input id="monthly" name="pricing-1" value="monthly" autocomplete="off" checked="" type="radio"> Monthly
      </label>
</div>

but nothing happens when I click on the button. What's wrong?

Upvotes: 1

Views: 40

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Problem:

The main problem comes from the selector #monthly input[name=pricing-1] that will search for the input with name pricing-1 that is a child of an element with the id monthly.

Solution:

You've to use $("input[name=pricing-1]") or $("#monthly") as selector since both refers to the same element :

$(document).ready(function() {
  $("#monthly").click(function() {
    console.log("Test 1");
  });
  $("input[name=pricing-1]").click(function() {
    console.log("Test 2");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-round btn-outline-primary w-150 active">
        <input id="monthly" name="pricing-1" value="monthly" autocomplete="off" checked="" type="radio"> Monthly
      </label>
</div>

Upvotes: 1

Akip
Akip

Reputation: 1

Try this : add onclick="name_func" on your input

<input onclick="test()" id="monthly" name="pricing-1" value="monthly" autocomplete="off" checked="" type="radio"> Monthly

In your JS :

function test() { console.log("test"); }

Upvotes: 0

Related Questions