jQuery: styling and unstyling on click radio button using parent(), next() - javascript

I have 3 identical sections. They are the exact same as each other. What I'm trying to achieve is when I click on the ".rad1"(first radio button), it styles its label. When I click on ".rad2", it should unstylize the first radio button and stylize second radio button. I only want it to happen in its own section, aka, when I click on one section, the styles are only applied to that section, no other section.
This is what I have, but I haven't found a way to achieve it:
$('.rad1').click(function() {
$(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
$(this).parent().next('.label1').css('background', 'transparent');
$(this).parent('.label2').css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>

I'd do it like this:
$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});
$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<label for="radio" class="label1">
<input type="radio" class="rad1" name="rad">First
</label>
</div>
<div class="second">
<label for="radio" class="label2">
<input type="radio" class="rad2" name="rad">Second
</label>
</div>
</form>
</div>
It's probably also better to add and remove a class instead of styling the lables using .css().

$('.rad1').click(function(){
$(this).parent()
.css('background','red');
});
$('.rad2').click(function(){
$(this).closest('div')
.prev().find('.label1')
.css('background','transparent');
$(this).parent()
.css('background','red');
});

There are many better approaches but I follow yours :
$('.rad1').click( function() {
$(this).parent('.label1').css('background', 'red');
$('.rad2').parent('.label2').css('background', 'transparent');
});
$('.rad2').click( function() {
$(this).parent('.label2').css('background', 'red');
$('.rad1').parent('.label1').css('background', 'transparent');
});

This can also be done without javascript, purely in CSS, if you make a slight change to the structure.
I started by copying j08691's snippet, then commented out the javascript and moved the label for each radio button so it follows rather than encloses the <input>.
Once you have that changed, you can write a CSS selector to target the label if it is the sibling of a :checked radio button. Unchecked buttons will retain their inherited orange background.
/*$('input[name="rad"]').click(function() {
$(this).closest('form').find('label').css('background', 'transparent')
$(this).parent().css('background', 'red');
});*/
.form-section {
background: orange;
border: 1px solid black;
}
.form-section input[type="radio"]:checked + label {
background: red;
}
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>
<!------------SECTION-->
<div class="form-section">
<form action="">
<div class="first">
<input type="radio" class="rad1" name="rad">
<label for="radio" class="label1">First</label>
</div>
<div class="second">
<input type="radio" class="rad2" name="rad">
<label for="radio" class="label2">Second</label>
</div>
</form>
</div>

Related

Laravel 8 Javascript function not working with form tag

The code below works fine without the use of the FORM tag.
But after I add the FORM tag, the code does not work anymore.
My code:
function ismcstop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Just rename ismcstop() function name like below
function ismcsfortop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Change the name of the label to something else other than ismcstop. I think it is overridden the function.
<label for="ismcstopLabel">Machine Stop?</label>
OR
Change the function name ismcstop() to ismcstopFunc()

Making all form inputs to be in readonly mode while clicking submit button

I have a form when the submit button is clicked form's all inputs needs to be in read-only mode and hide submit button and also displays submitting text. For this I coded:
$(document).ready(function() {
$("#submit_text").hide(); //Hiding submit_text
$("#testsubmitbutton").click(function() {
$("#testsubmitbutton").hide(); //Hiding submit button
$("#submit_text").show(); //Showing submit_text
$("#testform :input").prop('readonly', true); //Making all inputs to readonly
});
});
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">
Question 1
<div class="question_container">
<div class="question_div">
<p>Question?</p>
<input type="hidden" name="qid1" value="22">
<div class="option_div">
<input type="radio" name="radio1" id="checka1" value="A">
<label for="checka1">
<p>A</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkb1" value="B">
<label for="checkb1">
<p>B</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkc1" value="C">
<label for="checkc1">
<p>C</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkd1" value="D">
<label for="checkd1">
<p>D</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checke1" value="E">
<label for="checke1">
<p>None of the above</p>
</label>
</div>
</div>
</div>
<button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
<span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>
When I click the submit button it hides the submit button and shows submitting text. But it doesn't change the input property to read-only mode.
For radio button use disabled property:
$(document).ready(function() {
$("#submit_text").hide(); //Hiding submit_text
$("#testsubmitbutton").click(function() {
$("#testsubmitbutton").hide(); //Hiding submit button
$("#submit_text").show(); //Showing submit_text
$("#testform :input").prop('disabled', true); //Making all inputs to disabled
});
});
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">
Question 1
<div class="question_container">
<div class="question_div">
<p>Question?</p>
<input type="hidden" name="qid1" value="22">
<div class="option_div">
<input type="radio" name="radio1" id="checka1" value="A">
<label for="checka1">
<p>A</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkb1" value="B">
<label for="checkb1">
<p>B</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkc1" value="C">
<label for="checkc1">
<p>C</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkd1" value="D">
<label for="checkd1">
<p>D</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checke1" value="E">
<label for="checke1">
<p>None of the above</p>
</label>
</div>
</div>
</div>
<button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
<span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>
If you want send the selected value to the server then probably you can set the pointer-events to none which will indicate that the element is not the target of pointer events:
$(document).ready(function() {
$("#submit_text").hide(); //Hiding submit_text
$("#testsubmitbutton").click(function() {
$("#testsubmitbutton").hide(); //Hiding submit button
$("#submit_text").show(); //Showing submit_text
$("#testform :input").css({'pointer-events':'none', 'opacity':'.5'});
$('.option_div p').css({'opacity':'.5'});
$('.option_div p').click(false);
console.log($("form").serialize());
});
});
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">
Question 1
<div class="question_container">
<div class="question_div">
<p>Question?</p>
<input type="hidden" name="qid1" value="22">
<div class="option_div">
<input type="radio" name="radio1" id="checka1" value="A">
<label for="checka1">
<p>A</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkb1" value="B">
<label for="checkb1">
<p>B</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkc1" value="C">
<label for="checkc1">
<p>C</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkd1" value="D">
<label for="checkd1">
<p>D</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checke1" value="E">
<label for="checke1">
<p>None of the above</p>
</label>
</div>
</div>
</div>
<button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
<span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>
Readonly does not work on radio buttons, you can use disabled: true, however...
See this answer to understand the difference between disabled and readonly: What's the difference between disabled="disabled" and readonly="readonly" for HTML form input fields?
$(document).ready(function() {
$("#submit_text").hide(); //Hiding submit_text
$("#testsubmitbutton").click(function() {
$("#testsubmitbutton").hide(); //Hiding submit button
$("#submit_text").show(); //Showing submit_text
$("#testform :input").attr('disabled', true); //Making all inputs to readonly
});
});
.hiddenFramehideclass {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
<form method="post" action="" enctype="multipart/form-data" id="testform" target="hiddenFrame">
Question 1
<div class="question_container">
<div class="question_div">
<p>Question?</p>
<input type="hidden" name="qid1" value="22">
<div class="option_div">
<input type="radio" name="radio1" id="checka1" value="A">
<label for="checka1">
<p>A</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkb1" value="B">
<label for="checkb1">
<p>B</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkc1" value="C">
<label for="checkc1">
<p>C</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checkd1" value="D">
<label for="checkd1">
<p>D</p>
</label>
</div>
<div class="option_div">
<input type="radio" name="radio1" id="checke1" value="E">
<label for="checke1">
<p>None of the above</p>
</label>
</div>
</div>
</div>
<button class="" type="submit" name="testsubmitbutton" id="testsubmitbutton">Submit</button>
<span id="submit_text">Submitting please <b>do not</b> refresh!</span>
</form>

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

jquery toggle function is not working

I am making a form which is toggle (hide and show) with the help of button, but it is not working. Can anyone please review my code and tell why my script is not working. my code is below
$(document).ready(function () {
$("#add_facility").click(function () {
$("#facility-form").toggle('slow');
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i>
Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
</div>
</div>
</form>
</div>
You're selecting by id, but your form has a class, not an id; see ***:
$(document).ready(function() {
$("#add_facility").click(function() {
$(".facility-form").toggle('slow'); // ***
});
});
.facility-form {
background-color: #e3edfa;
padding: 4px;
cursor: initial;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="btn" id="add_facility">
<i class="fa fa-plus" aria-hidden="true"></i> Add Facilities
</button>
<div class="facility-form">
<form id="facility-form1">
<div class="row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Internet
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Bar
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Free Wifi
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Spa
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Parking
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" value="">Indoor Pool
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Family Rooms
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Smoking Rooms
</label>
</div>
</div>
</div>
</form>
</div>
You need to use the class selector not an ID selector
Change this line from,
$("#facility-form").toggle('slow');
To
$(".facility-form").toggle('slow');
Here is an working Fiddle : https://jsfiddle.net/pz6h4g7q/
Hope this helps!
this is mistake
$("#facility-form").toggle('slow');
change to
$(".facility-form").toggle('slow');
Change this:
$("#facility-form").toggle('slow');
to
$(".facility-form").toggle('slow');
facility-form is a class, not an ID.

Change alphabet when select radio button

When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>

Categories