I have these Radio Buttons in BootStrap.

I want to get the value of Radio whenever it is changed.

PLEASE DO NOT link to other questions posted no SO, I have checked all of them but does not work for me

<input id="link_type_option1" name="link_type" class="radio" type="radio" value="E" style="position: absolute; opacity: 0;">
<input id="link_type_option2" name="link_type" class="radio" type="radio" value="A" style="position: absolute; opacity: 0;">

Jquery

    $("input[name=link_type]").change(function () {
        console.log("hello");

    });

I have also tried

"input[name=link_type]:radio"

But I can easily get the Checked value on page load by

if ($("input[name=link_type]:checked").val() == "A") {
    console.log("Yes it is Article type")
}

EDIT

If I remove class="radio" then OnChange works well but I do not get my Radio buttons as Forms.Less renders

I have these Radio Buttons in BootStrap.

I want to get the value of Radio whenever it is changed.

PLEASE DO NOT link to other questions posted no SO, I have checked all of them but does not work for me

<input id="link_type_option1" name="link_type" class="radio" type="radio" value="E" style="position: absolute; opacity: 0;">
<input id="link_type_option2" name="link_type" class="radio" type="radio" value="A" style="position: absolute; opacity: 0;">

Jquery

    $("input[name=link_type]").change(function () {
        console.log("hello");

    });

I have also tried

"input[name=link_type]:radio"

But I can easily get the Checked value on page load by

if ($("input[name=link_type]:checked").val() == "A") {
    console.log("Yes it is Article type")
}

EDIT

If I remove class="radio" then OnChange works well but I do not get my Radio buttons as Forms.Less renders

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Jan 2, 2015 at 6:05 asked Jan 2, 2015 at 5:14 user4275254user4275254 9

• 1 So how do you change the inputs when they aren't visible ? – adeneo Commented Jan 2, 2015 at 5:16
• Opacity:0 ? How do you access invisible element? – Vipul Hadiya Commented Jan 2, 2015 at 5:17
• I am using Twitter BootStrap 3 and I can see elements BTW – user4275254 Commented Jan 2, 2015 at 5:17
• For me it's working after removing styles jsfiddle/1L4Lhsp1/1 – Mritunjay Commented Jan 2, 2015 at 5:18
• 2 @Mani - you're sure you're not using a plugin that creates some fancy fake radio buttons for you ? – adeneo Commented Jan 2, 2015 at 5:19

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 2

I can easily fire OnChange Event of radio button from your code.

What I done : Remove Position and Opacity from Style, So its visible.

And you can get radio button's value by this.value

Here is fiddle http://jsfiddle/78mpxr5L/2/

HTML

<input id="link_type_option1" name="link_type" class="radio" type="radio" value="E"> Lable E

<input id="link_type_option2" name="link_type" class="radio" type="radio" value="A"> Lable A

JS

$("input[name=link_type]").change(function () {
    alert(this.value);
    if(this.value == "A")
    {
        alert("Yes it A");
    }
    else
    {
        alert("Yes it E");
    }
});

After remove style from radio button and try below code which gives me value of radio button

<input id="link_type_option1" name="link_type" class="radio" type="radio" value="E" >E
<input id="link_type_option2" name="link_type" class="radio" type="radio" value="A" >A

<script> $("input[name=link_type]").change(function () {
    alert(this.value);

});</script>

<form name="myForm">
           <input type="radio" name="weighttype" id="weighttype" onclick="Function()" value="1" checked ><i></i>KG
<input type="radio"  name="weighttype" id="weighttype" value="2" onclick="Function()" ><i></i>Lb's


        </form>

<script>
function Function(){
var wType = document.forms['myForm'].elements['weighttype'];
    var len = wType.length;
    var wTval="";
    for(var i=0; i<len; i++){
        if(wType[i].checked){
            wTval = wType[i].value;
alert(wTval)
        }
    }
    }
</script>