We Keep Coding

Bootstrap Radio button result

Based on below HTML snippet, manage to get two lines of radio button. When you click on the radio button on the first line, and then proceeds to click any of the radio button on the second line, the result of the radio button on the first line disappears.
How can I make sure, results of both lines of radio button appear together.
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
Thanks
John

As stated in the MDN documentation on radio buttons:
A radio group is defined by giving each of radio buttons in the group
the same name. Once a radio group is established, selecting any radio
button in that group automatically deselects any currently-selected
radio button in the same group.
So, if you want the second <div> radio buttons to be separate, you have to use a different name for that set of buttons:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->

One div's checkbox input affecting another div's checkbox input

I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?

I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>

something wrong on my two radio inputs in js and php

This is part of my PHP and JS. These two radio inputs are on my contact form and after I added "domain" radio input, it stopped sending emails to me.
It was working fine until "transfer" radio input. I'm trying to figure out what am I missing.
thanks
if(isset( $_POST['transfer'])){
$transfer = $_POST['transfer'];
}
if(isset( $_POST['domain'])){
$domain = $_POST['domain'];
}
document.getElementById('status').innerHTML = "Sending...";
formData = {
'transfer' : $('input:radio[name=transfer]:checked').val()
'domain' : $('input:radio[name=domain]:checked').val()
};
<form>
<div class="col-md-6">
<div class="form-group">
<label class="form-check-label" for="transfer"><span style="color: #000">transfer</span></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label active" for="transfer1"><span style="color: #67615e">yes</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer1" value="yes" checked="">
<label class="form-check-label" for="transfer2"><span style="color: #67615e">no</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer2" value="no">
<label class="form-check-label" for="transfer3"><span style="color: #67615e">no clue</span></label>
<input class="form-check-input" type="radio" name="transfer" id="transfer3" value="no clue">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-check-label" for="domain"><span style="color: #000">domain</span></label>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label active" for="domain1"><span style="color: #67615e">yes</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain1" value="yes" checked="">
<label class="form-check-label" for="domain2"><span style="color: #67615e">no</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain2" value="no">
<label class="form-check-label" for="domain3"><span style="color: #67615e">no clue</span></label>
<input class="form-check-input" type="radio" name="domain" id="domain3" value="no clue">
</div>
</div>
</div>
</form>

I see you lack "," in json format, it should like this
document.getElementById('status').innerHTML = "Sending...";
formData = {
'transfer' : $('input:radio[name=transfer]:checked').val(),
'domain' : $('input:radio[name=domain]:checked').val()
};
Try to add ","
'transfer' : $('input:radio[name=transfer]:checked').val(),
Hope it's help

How to call javascript function for many radio button sets?

I have 10 questions each having 4 radio buttons as options. I want to validate whether all questions have a radio button checked. And call javascript function on submit button onclick.
Please help me with the javascript function.
Can i use a 2d elements to target each radio button in each question in the javascript function.Please resolve the javascript issue.running this javascript i can only target the questions using the 1d array.
function validateForm() {
var radios = document.getElementsByClassName("surveyQuestions");
var formValid = false;
var i = 0;
while (formValid == false && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (formValid == false) alert("Must Check Option !!");
}
<form class="forward">
<div class="surveyQuestions">
<label>2.Who is your Favorite Forward ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Lionel Messi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Cristiano Ronaldo
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Neymar Jr
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Mohammed Salah
</label>
</div>
</div>
</form>
<form class="midfielder">
<div class="surveyQuestions">
<label>3.Who is your favourite Midfielder? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Toni Kroos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Andreas Iniesta
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Kevin De Bruyne
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Paul Pogba
</label>
</div>
</div>
</form>
<form class="defender">
<div class="surveyQuestions">
<label>4.Who is your Favorite Defender ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Sergio Ramos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Gerard Pique
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Leonardo Bonucci
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Thiago Silva
</label>
</div>
</div>
</form>

Maybe you need to use classes to your radios. For example:
<input type="radio" class="checkthis group_01" id="group_01_item_01">
<input type="radio" class="checkthis group_01" id="group_01_item_02">
<input type="radio" class="checkthis group_01" id="group_01_item_03">
<input type="radio" class="checkthis group_01" id="group_01_item_04">
<input type="radio" class="checkthis group_02" id="group_02_item_01">
// ...and so on
After this you can select all radios with .checkthis class, and a group by .group_01 class, and an item with id.
Now you can use jQuery to find a selected from a group, like this:
var object_array = $('.group_01').find(':checked');
if (object_array.length > 0) {
// you have a selected element
} else {
// there isn't selected element
}
UPDATED:
Without jQuery, only native JavaScript:
var object_array = document.body.querySelector('.group_01:checked');
The if statement is the same.

You can try something like
Just modify your function something like below
function validateForm() {
var totalQue = document.getElementsByClassName("surveyQuestions").length;
var selectedAns = document.querySelectorAll("input[type='radio']:checked").length;
if(totalQue != selectedAns){
alert("Must Check Option !!");
return false;
}
}
This will give you all radio buttons which are selected.

Jquery does not catch unchecking of radio-button

I am builing a multi-step form.
Here is part of it:
<div class="form-group">
<div class="form-check">
<input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
<label for="1-1">Radio button 1-1</label>
</div>
<div class="form-check">
<input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
<label for="1-2">Radio button 1-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-1" id="textarea-1" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="2-1" class="form-check-input" type="radio" name="secondRadioGroup">
<label for="2-1">Radio button 2-1</label>
</div>
<div class="form-check">
<input id="2-2" class="form-check-input" type="radio" name="secondRadioGroup" data-show="#textarea-2">
<label for="2-2">Radio button 2-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-2" id="textarea-2" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="checkbox-1" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="form-check">
<input id="checkbox-2" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="form-check">
<input id="checkbox-other" class="form-check-input" type="checkbox" name="secondRadioGroup" data-show="#textarea-3">
<label for="checkbox-other">Other</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-3" id="textarea-3" cols="30" rows="10" style="display: none"></textarea>
</div>
And here is my JS :
$("[data-show]").change(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
What's the problem:
With checkbox it works fine. Showing and hiding on checking/unchecking the checkbox.
With radio buttons it works fine on the show, but it's not hiding on changing from current group of radio buttons.
Here is JSFiddle
EDIT 1:
What I need with radio button groups:
If I check radio-button with
name="radio_group_1" data-show="#id-of-textarea"
a textarea with
id="id-of-textarea"
shows up. If after this I check another radio-button from the same group
name="radio_group_1" NO DATA-ATTRIBUTE HERE
the textarea hides.

The jQuery logic is wrong. Working: https://jsfiddle.net/vutpcu0g/5
You should check the change event on all radios, not just the data-show ones. Then, select the nearest sibling radio to toggle the data-show element.
$("[type=radio],[type=checkbox]").change(function(){
if($(this).is(":checked") && $(this).data("show")) {
$($(this).data('show')).show();
} else {
var sib= $(this).parents('.form-group').find('[data-show]');
$(sib.data("show")).hide();
}
});

You have some errors in your code.Use this script.
$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
});
Fiddle: https://codepen.io/smitraval27/pen/XEpGNR
In your code you have not given [data-show] to every radio button. Plus on change of radio you have to use each to find out the changes of each and every radio.