We Keep Coding

How to check radiobox situation without a button?

i am designing a website. On the page there is a question with radiobox answers. I have 2 questions
1- I want to show another div that depends on the radiobox answer. Every radiobox needs to have different div target. Divs are hidden default, needs to show with radiobutton trigger.
2- Radiobox check is not gonna happen with a "confirm" button. I want to show the next div automatically when a radiobox is selected.
I think i need a check function but still cant make a working one. Help please
I tried something like this
function check() {
document.getElementById("radiobutton").checked = true;
}
My main question div:
<div class="card">
<form action="" method="post">
<div class="container-fluid">
<div class="row">
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio1"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
</div>
</div>
</form>
</div><!----card div--->

add an onclick event to your radio button input and then write a little function to show and hide your divs: (this could, of course, be simplified with jquery or something)
<label><input type="radio" name="radioGroup" onclick="showContent(this, 1)" /> Option 1</label>
<label><input type="radio" name="radioGroup" onclick="showContent(this, 2)" /> Option 2</label>
<div id="content1" style="display: none">Content for 1</div>
<div id="content2" style="display: none">Content for 2</div>
showContent(radioEle, id){
hideAll()
document.getElementById('content' + id).style.display = radioEle.checked ? 'block' : 'none'
}
hideAll(){
document.getElementById('content1').style.display = 'none'
document.getElementById('content2').style.display = 'none'
}

This bit of javascript will add an event listener for input on your radio buttons and then you can do whatever you want when they are selected. If you show us the divs you are displaying, I could help with that as well.
document.querySelectorAll(".CoktanSecmeli").forEach(function(item) {
item.addEventListener("input", function() {
console.log(this.value);
//select div and display it
});
});
<div class="card">
<form action="" method="post">
<div class="container-fluid">
<div class="row">
<div class="col">
<input class="CoktanSecmeli" type="radio" name="radio" value="Radio1"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio3"><br>Text<p class="SecimAciklama">Text</p></div>
</div>
</div>
</form>
</div><!----card div--->

Thanks for all answers, i finally did it! I know this is little but my js knowladge is zero.
<form>
<div class="container-fluid">
<div class="row">
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" onclick="CheckFunc()" id="Choice1" value="Radio 1"><br>TEXT<p class="SecimAciklama">TEXT</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" onclick="CheckFunc()" id="Choice2" value="Radio 2"><br>TEXT<p class="SecimAciklama">TEXT</p></div>
</div>
</div>
</form>
<script>
function CheckFunc(){
if(document.getElementById("Radio1").checked) {
document.getElementById("XXX").style.display = "block";
document.getElementById("YYY").style.display = "none";
}else if(document.getElementById("Dizustu").checked) {
document.getElementById("YYY").style.display = "block";
document.getElementById("XXX").style.display = "none";
}
}
</script>

Radio boxes won't validate

I have a series of radio groups, all with the same name because they are dynamically generated. I want them to be required, but nothing I'm doing is making that happen (including trying to count checked items with jquery).
I'm guessing this is due to some sort of ID conflict?
I have the radios marked as "required" in the HTML.
Or could this be due to the way I'm processing with jquery?
<div class="benchmark-question-title"><?php echo $atts['content']; ?></div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>
When I attempt to see if any radio groups with name "yesno" are NOT checked with jquery, it doesn't appear to recognize the groups and counts every option individually.
$('input:radio[name=yesno]').each(function(){
if ( $(this).is(":checked") ){
console.log('checked')
}
else{
console.log('not checked');
}
});
$('input:radio[name=yesno]').each(function() {
if ($(this).is(":checked")) {
console.log('checked')
} else {
console.log('not checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
<?php echo $atts['content']; ?>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

no need to itterate through, just check the checked state of the group.
$("input:radio[name='yesno']").is(":checked")
or
$("input:radio[name='yesno']:checked").val()
Using JQuery to check if no radio button in a group has been checked

I'm not following what exactly you're trying to accomplish, however if you're looking for the default functionality of only being able to select one radio at a time, you just need to add brackets to the name. Doing this, you also won't have to do any validation if you mark one of the radios as default (as they can't be deselected).
<input type="radio" name="yesno[]" value="yes" />
<input type="radio" name="yesno[]" value="no" checked />

You can use the form to base an event on. Here I used both the change and a validate event - so you can trigger the validate whenever you wish (like on a form submit?) and this shows an example how to do so.
$('form.benchmark-question-binary')
.on("change validate", 'input[type="radio"][name="yesno"]', function(event) {
let thisform = $(event.delegateTarget);
let radios = thisform.find('input[type="radio"][name="yesno"]');
let rChecked = radios.filter(":checked");
console.log(radios.length > rChecked.length);
console.log(radios.length, rChecked.length)
})
// now trigger the first one on startup
.find('input[type="radio"][name="yesno"]').first().trigger('validate');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
Am I the hero?
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.

You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});

$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})

Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>

Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>

How to highlight main label for checkbox input using css or jQuery

Let's assume i have code like below;
<div>
<span>SELECT1</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
<span>SELECT2</span>
<div>
<input type="checkbox" value="option3" name="option3">
<span>option3</span>
</div>
<div>
<input type="checkbox" value="option4" name="option4">
<span>option4</span>
</div>
</div>
Is there a way to highlight related "SELECT1" or "SELECT2" if at least one of involved option has checked ? In my situation , it is ok to do so for labels options1,2 and option3,4 however, how for SELECT1 and SELECT2 using css or jquery/js ?
Thanks in advance,

You can do it quite easily:
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]').is(':checked')){
$('.title').css('color','red');
}
else{
$('.title').css('color','black');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="title">SELECT</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
</div>

How to edit the text of label

I am new to JavaScript.Could anybody suggest me how to change the text of label in below code
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">
<input id="radioabc" type="radio" value="def" name="input_Radio">
abc
</label>
</div>
<div class="radio">
<label for="radioxyz">
<input id="radioxyz" type="radio" value="pqr" name="input_Radio">
xyz
</label>
</div>
</div>
I want to change text 'abc' and text 'xyz' to other values.
My approch to change text 'abc' to 'tvr'.
I've tried:
$($(".col-sm-6").children()[0]).children().text("tvr");
then it also removes input field.whats wrong in my approach or please suggest some other approach.

if you want to change text by Javascript:
var divs = document.getElementsByClassName('radio');//got all nodes in divs
divs[0].children[0].lastChild.data = "tvr"; // similar for second text...using divs[1]
JSFIDDLE DEMO

You can use jQuery and do it easily:
Example
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">abc</label>
<input id="radioabc" type="radio" value="def" name="input_Radio" />
</div>
<div class="radio">
<label for="radioxyz">
xyz
</label>
<input id="radioxyz" type="radio" value="pqr" name="input_Radio" />
</div>
</div>
javascript:
<script>
$(function() {
$('label').on('click', function(){
$(this).text('something else');
})
});
</script>