jquery radio button click and change function not working

Question

I want to hide and show div according to radio buttons value. HTML code is,

<div id="share_to_others">
  <input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
  <input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
  <input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>

And jquery code that i tried is,

$("#share_to_others input[name='fx_sharepl_type']").click(function () {
    alert("test");
});

$("#share_to_others input[name='fx_sharepl_type']").change(function () {
    alert("test");
});

$("#fx_sharepl_type").change(function () {
    alert("asdas");
});

$("input[name=fx_sharepl_type]:radio").change(function () {
    alert("click fired");   
});

$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
    alert("click fired");
});

Many of them from jsfiddle working demo, But not working for me, i dont know why. Am i doing anything wrong?

no i used fiddle from other question and its working, but the same code not working for me — Himanshu Bhardiya
– Himanshu Bhardiya, Commented Jul 3, 2015 at 12:08
</div> instead of <?div> and id (s) must be unique. in any case, it works: jsfiddle.net/qryz8b6o — briosheje
– briosheje, Commented Jul 3, 2015 at 12:09
Are you actually loading JQuery? Are you running this code after the elements are in the DOM? — Turnip
– Turnip, Commented Jul 3, 2015 at 12:10

user5077709 · Accepted Answer · 2015-07-03 12:29:16Z

2

You have to give unique id to each radio button then after do like this way.

$("#r1, #r2, #r3").change(function () {

answered Jul 3, 2015 at 12:29

user5077709

Sign up to request clarification or add additional context in comments.

2 Comments

Himanshu Bhardiya Over a year ago

but i have dynamic radio buttons, so how can i define all button in change function

user5077709 Over a year ago

@ Sanket. ok then also you can give separate id to each radio button via php or Jquery.

Anwar · Accepted Answer · 2015-07-03 12:28:31Z

$(function() { // DOM loaded event handler
  var show_duration = 0;
  var content_33 = $("#content_33");
  var content_22 = $("#content_22");
  var content_11 = $("#content_11");
  var bloc_radio_share = $("#share_to_others");
  
  // Take an html element in parameter and show it
  function show_content(content_id) {
    content_id.show(show_duration); 
  }
  
  // Take an html element in parameter and hide it
  function hide_content(content_id) {
    content_id.hide(0); 
  }
  
  hide_content(content_22);
  hide_content(content_11);
  
  
  bloc_radio_share.change(function() {
    var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
    
    if (radio_checked_val == 33) {
      hide_content(content_22);
      hide_content(content_11);
      show_content(content_33);
    }
    else if (radio_checked_val == 22) {
      hide_content(content_33);
      hide_content(content_11);
      show_content(content_22);
    }
    else { // case content == 11
      hide_content(content_33);
      hide_content(content_22);
      show_content(content_11);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
  <label>
    <input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
    33
   </label>
  <label>
    <input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
    22
  </label>
  <label>
    <input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
    11
  </label>
</div>
<div id="content_33">
  This div is displayed because of click on radio button 33
</div>
<div id="content_22">
  Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
  If you click on radio button 11 you'll see me, like now
</div>

Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.

Ahs N · Accepted Answer · 2015-07-03 12:27:53Z

0

enter image description here Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window. Selecting any version of JQuery will make your code work.

answered Jul 3, 2015 at 12:27

Ahs N

8,3961 gold badge30 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery radio button click and change function not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related