Develop Reference

Radio button is showing div on selection but not hiding after selecting a different radio button

I have three divs I want to show based on a radio selection. I've written the below script, but the problem I've run into is the div doesn't hide after a different radio button is selected. I'm using ucalc so I can't change the class names or ids of the divs or the radio buttons so have to work with that.
Note, the radio button is automatically selected when the form loads so the first div needs to be showing initially.
Code below:
$(document).ready(function(){
// First Div/Radio Button
$('#input_radio-30-0-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
// Second Div/Radio Button
$("#grid-44-46").hide();
$('#input_radio-30-1-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
// Third Div/Radio Button
$("#grid-46-48").hide();
$('#input_radio-30-2-des').on('change', function(){
var a = $(this).prop('checked');
if(a) {
$("#grid-46-48").show();
} else {
$("#grid-46-48").hide();
}
});
});
I'm not very familiar with writing javascript (you can probably tell!) so an explanation for 'dummies' would be appreciated!
Thank you for your help!

You need to hide 2nd & 3rd div by CSS and when user change other button then find ID so according to ID show that div and rest div will hide as below snippet.
$(document).ready(function(){
$('#input_radio-30-0-des, #input_radio-30-1-des, #input_radio-30-2-des').on('change', function(){
var getid = $(this).attr('id');
if (getid=='input_radio-30-0-des') {
$('#grid-44-46, #grid-46-48').hide()//2nd and 3rd div hide
$("#grid-40-42").show();
}
if (getid=='input_radio-30-1-des') {
$('#grid-40-42, #grid-46-48').hide()//1st and 3rd div hide
$("#grid-44-46").show();
}
if (getid=='input_radio-30-2-des') {
$('#grid-40-42, #grid-44-46').hide()//1st and 2rd div hide
$("#grid-46-48").show();
}
})
});
#grid-44-46, #grid-46-48{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="div-show-hide" id="input_radio-30-0-des" checked> Button One</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-1-des"> Button Two</label>
<label><input type="radio" name="div-show-hide" id="input_radio-30-2-des"> Button Three</label>
<div id="grid-40-42"><h2>Show - Div One</h2></div>
<div id="grid-44-46"><h2>Show - Div Two</h2></div>
<div id="grid-46-48"><h2>Show - Div Three</h2></div>

Use wild card to hide all <div> which id start with grid- on radio change.
$("[id^=grid-]").hide();
$('#input_radio-30-0-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-40-42").show();
} else {
$("#grid-40-42").hide();
}
});
$('#input_radio-30-1-des').on('change', function() {
$("[id^=grid-]").hide();
var a = $(this).prop('checked');
if (a) {
$("#grid-44-46").show();
} else {
$("#grid-44-46").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='input_radio-30-0-des' name="group1" />
<div id='grid-40-42'>grid-40-42</div>
<input type='radio' id='input_radio-30-1-des' name="group1" />
<div id='grid-44-46'>grid-40-46</div>
Note
No need multi-pal $(document).ready(function(){ .
Id must be unique.

I'm using a Javascript object to match each Radio button with it's targeted div.
I assume they are hidden by default. Just having fun and giving an alternative to multiple checks! A cleaner code also where you could easily setup all those confusing names...
$( document ).ready(function() {
let matches = {
"input_radio-30-0-des": 'grid-40-42',
"input_radio-30-1-des": 'grid-44-46',
"input_radio-30-2-des": 'grid-46-48'
};
$(":input[name='FM']").on("change", function () {
var target= matches[$(this).attr('id')];
$('#' +target).toggle($(this).checked);
$("[id^=grid-]").not('#' +target).hide();
})
});
div[id*='grid-'] { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="FM" id="input_radio-30-0-des" value="0"/>
<label for="input_radio-30-0-des">0</label>
<input type="radio" name="FM" id="input_radio-30-1-des" value="1"/>
<label for="input_radio-30-1-des">1</label>
<input type="radio" name="FM" id="input_radio-30-2-des" value="2"/>
<label for="input_radio-30-2-des">2</label>
<div id="grid-40-42">40-42</div>
<div id="grid-44-46">44-46</div>
<div id="grid-46-48">46-48</div>

Checkbox Hidden Div Unchecked

I have a checkbox hidden div with text field. If checkbox is checked this text field will showed, but if checkbox unchecked text field not show. This Code :
<script type="text/javascript">
$(function () {
$("input[name='checkbox1']").click(function () {
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
$("#dvcheckbox1").hide('lainnya');
}
});
});
</script>
<div style="margin-left: 29%; margin-top: -2%;">
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1" style="display: none;">
<?php echo $form->textField($model,'lainnya'); ?>
</div>
</div>
But, How this checkbox is checked if there something value on textfield? and text field shown. Because in form Update, value was show but checkbox is checked. I want checkbox is checked
For example Like this:
Click to show example

Instead use with change event with .toggle(boolean) method:
// on page load check of the div contains any text
$("#dvcheckbox1").toggle(function(){
var $v = $(this).find('input').val();
$("input[name='checkbox1']").prop('checked', $v.trim().length !== 0)
return $v.trim().length !== 0;
});
$("input[name='checkbox1']").change(function () {
$("#dvcheckbox1").toggle(this.checked);
});

There are a few things here:
1 - Better if you use document ready, because it waits until all the elements are loaded.
2 - You should hide the element$("#dvcheckbox1").hide('lainnya') when the page is loaded.
3 - A listener in the input:text is a good idea. It enables the checkbox if the textbox is empty.
Please, have a look at the next piece of code:
<div>
<label for="checkyes1">
<input type="checkbox" id="checkyes1" name="checkbox1" value="lainnya" />
Lainnya
</label>
<div id="dvcheckbox1">
<label for="myValuye"/>
<input type="text" id="myValue" name="myValue" value=""/>
</div>
</div>
<script>
$(document).ready(function() {
$("input[name='checkbox1']").click(function () {
// Always use some logs to check what line are you reaching.
console.log("Clicked checkbox!!!");
if ($("#checkyes1").is(":checked")) {
$("#dvcheckbox1").show('lainnya');
} else {
console.log("Value: " + $("#myValue").val());
$("#dvcheckbox1").hide("lainnya");
}
});
$("#myValue").bind("change paste keyup", function() {
if ($(this).val() == "") {
$("#checkyes1").removeAttr("disabled");
} else {
$("#checkyes1").attr("disabled", true);
}
});
// First of all we hide the #dvcheckbox1
$("#dvcheckbox1").hide('lainnya');
})

Checkbox check first time not working, after second time, it is OK

I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name).click(function(){
if ($('#'+id_name +'_checkbox').prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

<script type="text/javascript">
$('label').click(function() {
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
alert('Unchecked');
}
else {
alert('Checked');
}
Workind DEMO here in jsFiddle

Simplify things, you don't need each loop:
$('label').click(function() {
name=this.id;
if ($('#'+name+'_checkbox').prop('checked')) {
alert('Checked');
}
else{
alert('unchecked');
}
});
Demo: http://jsfiddle.net/fqvajvo1/2/
Script running correctly, script checks prop, but on label click -> checkbox is really unchecked, property changing comes later.
So, maybe in your case reverse logic could help (if you need alerts at all):
http://jsfiddle.net/fqvajvo1/4/ :)

I always use .is(':checked').I find it way more reliable
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+id_name +'_checkbox').change(function(){
if ($(this).is(':checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>

your click id is not complete name,so add complete name and call $(this) property will be ok...
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name+'_checkbox').click(function(){
if ($(this).prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>

Use .on to work for all events and all clicks on jQuery
Mainly used for dynamic creating elements
$(document).on('click','selector',function(){
});
Use class names for best options for grouped elements

jquery radio button click and change function not working

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?

You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {

$(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.

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.

jQuery / JavaScript: Check all checkboxes and Check each checkbox to display div

I am having a hard time figuring this out. I tried to make a global checkbox that will check all other sub-checkboxes and display a div, which works fine, but the issue is when i try to make each sub-checkboxes check and display the div themselves.
I wrote jquery hide and show for it.
When I check the first sub-checkbox, and check the second; the div displays but when i go back and uncheck the first one, the div closes and one and on due to the hide and show function, how can i do this?
Here is my code below.
<script>
$(document).ready(function(){
$('#checkbox-global').click(function(){
if($(this).is(':checked'))
$('.checkbox-group').prop('checked', true);
else
$('.checkbox-group').prop('checked', false);
});
});
$(document).ready(function(){
$('#checkbox-global').click(function(){
if($(this).is(':checked'))
$('.loaded').show(1000);
else
$('.loaded').hide(1000);
});
});
$(document).ready(function(){
$('.checkbox-group').click(function(){
if($(this).is(':checked'))
$('.loaded').show(1000);
else
$('.loaded').hide(1000);
});
});
<!-- The Div -->
<div class="loaded">RESTORE | DELETE</div>
<!-- The Global Checkbox -->
<input type="checkbox" id="checkbox-global" class="checkbox-group">
<br>
<!-- The Sub-checkboxes -->
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">

You don't need to use document.ready multiple times, one is enough. This is to ensure that all DOM structure is ready and you can get the desired element at that point.
following are the points to consider
1) No need to bind click event twice for checkedLength, you can put checkbox check/uncheck and div show / hide logic in same click event handler.
2) You can check if any other checkbox is checked from checkbox-group, if none is checked then hide div otherwise show it.
$(document).ready(function(){
$('#checkbox-global').click(function(){
// check uncheck checkbox as per checked status
$('.checkbox-group').prop('checked', $(this).is(':checked'));
//show hide div
if($(this).is(':checked'))
$('.loaded').show(1000);
else
$('.loaded').hide(1000);
});
$('.checkbox-group').change(function(){
//check if checkbox-group have atleast one checkbox checked
var checkedLength = $('.checkbox-group:checked').length;
if(checkedLength > 0)
$('.loaded').show(1000);
else
$('.loaded').hide(1000);
});
});

You have to check for any of the check boxes is checked and if yes don't hide the div
Here is a sample code:
$(document).ready(function(){
$('#checkbox-global').click(function(){
if($(this).is(':checked')){
$('.checkbox-group').prop('checked', true);
$('.loaded').show(1000);
}
else {
$('.checkbox-group').prop('checked', false);
$('.loaded').hide(1000);
}
});
$('.checkbox-group').click(function(){
var cnt = $(".checkbox-group:checked").length;
if(cnt > 0)
$('.loaded').show(1000);
else
$('.loaded').hide(1000);
});
});

Try this code:
HTML
<!-- The Div -->
<div class="loaded">RESTORE | DELETE</div>
<!-- The Global Checkbox -->
<input type="checkbox" id="checkbox-global" class="checkbox-group">
<br>
<!-- The Sub-checkboxes -->
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
jQuery
$(function () {
$(".loaded").hide();
$("#checkbox-global").click(function () {
if ($("#checkbox-global").is(":checked")) {
$(".checkbox-group").prop("checked", true);
} else {
$(".checkbox-group").prop("checked", false);
}
});
$(":checkbox").click(function () {
if ($(".checkbox-group").is(":checked")) {
$(".loaded").show(1000);
} else {
$(".loaded").hide(1000);
}
});
});

Try this
$(document).ready(function(){
var c = $('.checkbox-group').size(); //This line is used to count checkbox
$('#noc').html(c);
$('#checkbox-global').click(function(){
if($(this).is(':checked')) {
var nocf = $(":checked").size()
$('#noch').html(nocf);
$('.checkbox-group').prop('checked', true);
$('.loaded').show();
}
else {
$('.checkbox-group').prop('checked', false);
$('.loaded').hide();
var nocf = $(":checked").size()
$('#noch').html(nocf);
}
});
$('.checkbox-group').click(function(){
var tom = $('#checkbox-global').is(':checked');
if(tom == true || $('.checkbox-group').is(':checked')) {
var nocf = $(":checked").size()
$('#noch').html(nocf);
console.log($(":checked").size()); //This line is used to count checked checkbox
$('.loaded').show();
}
else{
$('.loaded').hide();
var nocf = $(":checked").size()
$('#noch').html(nocf);
}
});
});

$(function() {
var checked = true;
$("#all_check").on("change", function() {
checked = $(this).is(':checked');
if (checked) {
$('.dg-img').prop('checked', true);
}
else
{
$('.dg-img').prop('checked', false);
}
});