We Keep Coding

when check a checkbox, checked other checkbox with same value with javascript

I have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second.
Here is the code of the 1st form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
<label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
<label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
And here is the code of the 2nd form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
<label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
<label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .
I tried with this script but it doesn't work:
<script type="text/javascript">
jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
}else
{
jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
}
});
</script>
Could someone help me?

You must set unique value for each radio box in 1st form.
and check when radio click => get value and check to same unique value in 2nd form.
example:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,

try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>

Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

Trying to create a checkbox for comparing elements

So far I manage to show/hide button when checkbox is checked but its checking all checkbox which I don't want.
my goal is to check different checkboxes without ticking all of them at the same time.
Edit: also to count how many elements have been checked.
http://jsfiddle.net/bLd0gaxy/1/
<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>
<input type="checkbox" class="compare" name="compare">
<label for="compare" class="compare-label ml-10"> Compare 2</label>
<!-- <div class="compare-btn"></div> -->
<button class="compare-btn ml-10" style="display: none;">Compare</button>
$('.compare').click(function() {
if($('.compare').is(':checked')){
$('.compare-label').hide();
$('.compare-btn').show();
} else{
$('.compare-label').show();
$('.compare-btn').hide();
}
});

You have to use .prop("checked") to get the checked state (http://api.jquery.com/prop/). Here is your working example: http://jsfiddle.net/infous/bLd0gaxy/3/

You need to use this to work with the closest elements:
$('.compare').change(function() {
if (this.checked) {
$(this).next("label").hide();
$(this).nextUntil("button").show();
} else {
$(this).next("label").show();
$(this).nextUntil("button").hide();
}
var totalChecked = $(".compare:checked").length;
});
Also, work with the change event of the checkbox.

Jquery get value of text box next to a radio button

I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?

Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});

use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});

You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.

Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo

If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.

jQuery checking radio box status and showing an element

I'm trying to show a div of another set of radio boxes but only depending on which radio button is first selected.
If option option one is selected, I would like condition one div to show and if option two is selected I would like condition two div to show.
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
if ($("id=[option-one]").is(":checked")) {
$('#visible-condition-one').show("slow");
} else if ($("id=[option-two]").is(":checked")) {
$('#visible-condition-two').show("slow");
};
});
<div id="always-visible">
<label class="control-label">Would you like option 1 or option 2</label><br>
<label class="radio-label"><input type="radio" id="option-one" name="option-info"> Option 1</label>
<label class="radio-label"><input type="radio" id="option-two" name="option-info"> Option 2</label>
</div>
<div id="condition-one">
<label class="control-label">If you pick option 1, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-three" name="option-info-group-two"> Option 3</label>
<label class="radio-label"><input type="radio" id="option-four" name="option-info-group-two"> Option 4</label>
</div>
<div id="condition-two">
<label class="control-label">If you pick option 2, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-five" name="option-info-group-three"> Option 5</label>
<label class="radio-label"><input type="radio" id="option-six" name="option-info-group-three"> Option 6</label>
</div>

$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$("#option-one").on("change", function() {
if($(this).is(":checked")) {
$('#condition-one').show("slow");
}
});
$("#option-two").on("change", function() {
if($(this).is(":checked")) {
$('#condition-two').show("slow");
}
});
});
In your code, the action must be taken on user input, in this case, a radio box. You must attach a 'change' event to your radio boxes and when user changes status, the callback function is triggered.

How about the following:
//Cache our deciding radio buttons
var $radio = $('#always-visible :radio'),
//An array of the available radio/div identifiers
ids = ['one', 'two'];
//Bind an event to your deciding radio buttons
$radio.change(function(){
//That will loop through your radio buttons
$.each(ids, function(_, n){
//See if this one is checked
var checked = $('#option-' + n).prop('checked');
//If so, show the relevant block, otherwise hide it
$('#condition-' + n).toggle(checked);
});
//Trigger the event on page load
}).change();
JSFiddle

i just did something similar(working)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$(".radio-label").on("change", function() {
if ($('.radio-label#1').is(':checked')) { // if the radiolabel of id=1 is checked
$('#condition-one').show("slow"); //show condition one
$('#condition-two').hide();
} else if ($(".radio-label#2").is(":checked")) {
$('#condition-two').show("slow");
$('#condition-one').hide("slow");
}
});
});
</script>
</head>
<body>
<input type="radio" class="radio-label" id="1" name="option-info"></input>
<input type="radio" class="radio-label" id="2" name="option-info"></input>
<div id="condition-one">
test1
</div>
<div id="condition-two">
test2
</div>
</body>