how to hide/ show input box on radio button click event - php

Question

I want to hide and show input field on radio button click event my HTML is
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="xyz1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
What I want is when radio button with value="Fresher" is clicked the input box name="cardno" should be hidden.
I tried to solve this by using jQuery but it is not working.
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
Can any body help me how to solve this?

Answer 1

name of your radio button should be same to check on click event or make array name of your radio button
like below code
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="abc1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
and then create function like
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
please reply if i can help you more..

Answer 2

change the spelling to Experienced
you used
if (value == 'Experianced')

Answer 3

Besides the typo in Experienced, try setting up a click event for each radio button:
$(document).ready(function() {
$('input[name="abc1"][value="Experienced"]').click(function() {
$("#tyx").show();
});
$('input[name="xyz1"][value="Fresher"]').click(function() {
$("#tyx").hide();
});
});
Note:
You can simplify your selectors to use ids with:
$('#abc')
and
$('#xyz')

Answer 4

Fix with:
$(document).ready(function () {
$("input[type='radio']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
});

Answer 5

Html:
<input type="radio" id="abc" name="jobtype" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="jobtype" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
Radio buttons of same group should have same name
Js:
$(document).ready(function () {
$("input[name='jobtype']").click(function () {
var value = this.value;
if (value == 'Experienced') {
$("#tyx").show();
}
else{
$("#tyx").hide();
}
});
});