Develop Reference

Given two yes/no fields, how can I use JavaScript to make the field 2 value checked "Yes" whenever the field 1 value is checked "Yes"?

If Field 1 is checked "Yes" then Field 2 should be checked "Yes"
This is what I've been trying so far:
Field 1:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field1" id="Question15yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field1" value="No" onclick="Check()">No</div>
Field 2:
<div class="entire">
<div class="col3"><label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label></div>
<div class="col9"><input type="radio" name="Field2" id="Question16yes" value="Yes" onclick="Check()">Yes <input type="radio" name="Field2" value="No" onclick="Check()">No</div>
I was trying something as simple as this js below, but I'm definitely missing something. Any help would be greatly appreciated!
<script language="JavaScript">
function Check() {
$("#Question15yes").click(function(){
if ($(this).is(':checked'))
{
$("#Question16yes").val("Yes");
}
}
});
}
</script>

Make sure you are including JQuery in your page.
To bind your event, you need to wait that the DOM is fully loaded, else you would try to use an element that doesn't exist yet.
<script language="JavaScript">
$(function() {
$(".question-checkbox").click(function(){
if ($(this).is(':checked'))
{
console.log($(this));
}
});
});
</script>
Also, you might want to change the JQuery selector from ID to class, so that you can use the same code for all similar checkboxes.
Put a .question-checkbox class on the inputs, and remove all onclicks.

You don't have to call check on every click. Once document loads, call it once.
window.addEventListener("load", function(){
$("input[type='radio']").on("click", function(){
if($("#Question15yes").is(':checked'))
$("#Question16yes").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field1||Question15||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field1" id="Question15yes" value="Yes">
Yes
<input type="radio" name="Field1" value="No" >No
</div>
<div class="entire">
<div class="col3">
<label class="label-right">||FIELDTAG Field2||Question16||ENDFIELDTAG|| </label>
</div>
<div class="col9">
<input type="radio" name="Field2" id="Question16yes" value="Yes">
Yes
<input type="radio" name="Field2" value="No">
No
</div>

Use this for a single checkbox with the class name "example":
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});

JQuery in PHP CHECKED

I have a problem and i do not find where it is, I explain to you I have a page.php which integrates a form.php and in this page.php I have a page1.php which is integrating also and which also has the form.php, and in this form I have Checkbox only my functions jquery works fine with pahe.php but not with page1.php and I do not understand why
page.php
<div class="left" style="float: left;">
<?php include('C_User_file/Planning/Form/Start/FStartT1.php'); ?>
</div>
page1.php
<div class="left" style="float: left;">
<?php include('C_User_file/Planning/Form/Start/FStartT1.php'); ?>
</div>
FStartT1.php
<label>
<input type="checkbox" id="cbox1" value="1" checked="checked" name="ALL1">
ALL
</label>
<label>
<input type="checkbox" id="cbox2" value="1" name="FMS1">
FMS
</label>
<label>
<input type="checkbox" id="cbox3" value="1" name="CPT1">
CPT
</label>
jquery.js
$("#cbox1" ).click(function(){
$('input[name=ALL1]').attr('checked', true);
$('input[name=FMS1]').attr('checked', false);
$('input[name=CPT1]').attr('checked', false);
});
$("#cbox2" ).click(function(){
$('input[name=ALL1]').attr('checked', false);
$('input[name=FMS1]').attr('checked', true);
$('input[name=CPT1]').attr('checked', false);
});
$("#cbox3" ).click(function(){
$('input[name=ALL1]').attr('checked', false);
$('input[name=FMS1]').attr('checked', false);
$('input[name=CPT1]').attr('checked', true);
});
On page.php works fine but on page1.php this does not work at all, thanks for your help
Be careful, my page1.php is included in page.php

By looking at your code, I got to know one thig.
The FStartT1.php i.e your FORM which is being imported 2 times.
So technically you have 2 form fields when the page is loaded. If you have doubt, just hit ctr+u on chrome and check the page source. You find 2 forms.
The means the IDs are duplicating. SO jQuery is unable to process it. IDs must be unique.
So,the following sections won't work.
$("#cbox1" ).click(function(){
});
$("#cbox2" ).click(function(){
});
$("#cbox3" ).click(function(){
});
Solution:
Make it a class instead of ID. And call like this
<label>
<input type="checkbox" class="cbox1" value="1" checked="checked" name="ALL1">
ALL
</label>
<label>
<input type="checkbox" class="cbox2" value="1" name="FMS1">
FMS
</label>
<label>
<input type="checkbox" class="cbox3" value="1" name="CPT1">
CPT
</label>
And in your jQuery,
$(".cbox1" ).click(function(){
});
$(".cbox2" ).click(function(){
});
$(.cbox3" ).click(function(){
});

Alternative Solution: Radio fields
Is there any reason for you not to use radio fields?
If someone (for whatever reason) has JavaScript disabled in their browsers settings, that person would be able to check and combination of your checkboxes.
<label>
<input type="radio" class="cbox1" value="1" checked="checked" name="events">
ALL
</label>
<label>
<input type="radio" class="cbox2" value="1" name="events">
FMS
</label>
<label>
<input type="radio" class="cbox3" value="1" name="events">
CPT
</label>

Use the below jQuery:
$("input[type=checkbox]" ).click(function(){
$("input[type=checkbox]" ).each(function(){
$(this).attr('checked', false);
});
$(this).attr('checked', true);
});
Try the above jquery code.
Explanation:
You are using the jquery selector as id and you are including the page1.php in page.php and both page has included FStartT1.php page. So you have same checkboxes with same id twice.
That's why your jquery code is working for first one not for second one.
Remember the id must be identical for HTML page and for jQuery also.
And I have right a generic jQuery code.

radiobuttons and conditional checkbox

I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});

You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()

You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>

Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.

You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>

how to hide and show named divs according to radio value?

This one is quite similar to my other question on:
how to hide and show named divs according to enum value?
Idea here is slightly different, though. The toggle() jQuery function is related to a radio button which is coded below:
<div id="recurrent">
<label for="recurrent">Recurrent? </label>
<input type="radio" id="idtrue" name="recurrent" value="true">Yes
<input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>
The div to toggle is:
<div id="ifRecurrentTrue">
/// something
</div>
And the adapted jQuery from the other question is:
$('#recurrent select').on('change', function () {
var value = this.value;
$('#ifRecurrentTrue').toggle(value == true);
}).change();
I bet it's just a matter of different functions, right?
Again, thanks in advance!

You need to find the input elemetns by its name, so use the attribute equals selector instead of the element selector select
$('#recurrent input[name="recurrent"]').on('change', function() {
$('#ifRecurrentTrue').toggle(this.checked && this.id == 'idtrue');
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recurrent">
<label for="recurrent">Recurrent?</label>
<input type="radio" id="idtrue" name="recurrent" value="true">Yes
<input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>
<div id="ifRecurrentTrue">
/// something
</div>

Did't see the element with select tag on provided code, could be input. Replace select with input like following:
$('#recurrent input').on('change', function () {
var value = this.value;
$('#ifRecurrentTrue').toggle(value == true);
}).change();

$(document).ready(function() {
$('input:radio[name=recurrent]').on('change', function () {
var values = this.value;
$('#ifRecurrentTrue').toggle(values =='true');
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="recurrent">
<label for="recurrent">Recurrent? </label>
<input type="radio" id="idtrue" name="recurrent" value="true">Yes
<input type="radio" id="idfalse" name="recurrent" value="false" checked>No
</div>
<div id="ifRecurrentTrue">
/// something
</div>

bootstrap check/uncheck multiple elements with js

I am trying to make this work but can't make it happen. I have a bootstrap template and i want to check and uncheck multiple checkboxes (like this: http://jsfiddle.net/v6wmV/177/ )
I know this is a common subject with many solutions, but none seem to work for this case and i would like to know why.
This is the code snippet from the view:
<div class="hide" id="states">
<div class="control-group">
<label class="control-label">Select</label>
<div class="check">
<div class="controls">
<label class="checkbox line">
<input type="checkbox" class="all" value="Todas" id="allstates" name="st[25]"/>All
</label>
<label class="checkbox line">
<input type="checkbox" value="Caba" id="" name="st[1]"/>Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Buenos Aires" id="" name="st[2]"/> Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Catamarca" id="" name="st[3]"/> Catamarca
</label>
<label class="checkbox line">
<input type="checkbox" value="Chaco" id="" name="st[4]"/> Chaco
</label>
</div>
</div>
</div>
</div>
and this is my js file (with other functions):
$('.hide').hide();
$('#registered').click(function(){
$('#content').toggle('fast');
});
$('#age').click(function () {
$('#content2').hide('fast');
$('#content1').show('fast');
});
$('#range').click(function () {
$('#content1').hide('fast');
$('#content2').show('fast');
});
$('#with').click(function(){
$('#child').toggle('fast');
});
$('#showstates').click(function(){
$('#states').show('fast');
});
$('#hidestates').click(function(){
$('#states').hide('fast');
});
//function for check/uncheck
$('.all').click(function() {
var $checkboxes = $(this).parent().find('input[type=checkbox]');
$checkboxes.prop('checked', $(this).is(':checked'));
});
this is the fiddle: http://jsfiddle.net/jimena/j56Dy/
which is not working

you need to go up two stages instead of one. parent() gives you the label element, you need to go up to the "controls"-classed div to apply your find method :
var $checkboxes = $(this).parent().parent().find('input[type=checkbox]');
Of course that was to apply minimal change to your code way. The one provided by Joe up here is probably smarter : getting all the checkboxes you want without having to use parent() method. But to do so you might want to id your checkbox group so that you do not select all the checkboxes accross your DOM.
By the way, don't you have to show your hide div at some point to see your checkboxes ?
Edit> OK actually Manish is right with parents it is just right, forget my answer :D