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);
});

ngIf an angular reactive form component value

I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.
https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts
HTML.component
<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
<span class="checkmark"></span>
</label>
</div>
<!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
<div class="col-md-8" >
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
</div>
Can anybody get this to work and show me what I am doing wrong here please?

You need to access the value of the form control:
*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">
STACKBLITZ

Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:
*ngIf="form.controls['selectedButton'].value === 'yes'"

Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"
Try like this:
Working Demo
.html
<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />
<div class="col-md-8" *ngIf="showTitle">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
.ts
onRadiochange(e) {
if(e.section == 'yes'){
this.showTitle = true
} else {
this.showTitle = false
}
}
It can also be done in one line like this:
<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.
In personal.component.ts, add this variable.
yesSelected: boolean = true;
Also in ngOnInit(),
this.form.valueChanges.subscribe(val=>{
if(val.radioButtonsGroup.selectedButton.section === "yes")
this.yesSelected = true;
else
this.yesSelected = false;
});
In personal.component.html, rewrite your if condition like this.
<div class="col-md-8" *ngIf="yesSelected">
<input type="text" formControlName="title" placeholder="Title">
</div>
These changes will show the title textbox only when the yes check box is selected.

Why my <script> doesn't enable/disable the specific submit-button?

I'm working with Laravel 5 and I've the following HTML pages:
HTML 1
<div class="row">
#foreach($postList as $post)
#include('Pages.Post.postInGroup', ['post'=>$post, 'commentsList'=>$commentsList])
#endforeach
</div>
HTML 2
<form id="msform" action="{{route('comments.store')}}" method="post">
{{ csrf_field() }}
<div class="row align-items-center">
<div class="col-3 col-sm-3 col-md-2 col-lg-2 col-xl-1" style="display: inline-block;">
<img src="{{url(Auth::user()->picture_path)}}" style="border-radius: 50%;" width="30" height="30" alt="User Picture">
</div>
<div class="col-9 col-sm-9 col-md-6 col-lg-6 col-xl-9" style="display: inline-block;">
<textarea class="form-control" placeholder="Post a comment" id="comment_content {{$post->id}}" name="comment_content" rows="1"></textarea>
</div>
<div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1" >
<input type="submit" name="comment_button {{$post->id}}" class="btn btn-primary" value="Comment" style="background-color: #228B22;"/>
<input type="hidden" value="{{$post->id}}" name="postId" id="postId">
<input type="hidden" value="{{$theGroup->id}}" name="groupId" id="groupId">
</div>
</div>
</form>
<script src="{{ url('js/jquery-3.3.1.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#msform > div > div > input[name=comment_button {{$post->id}}]').prop('disabled', true);
//while user is typing disable and enable based on the value.
$('#msform > div textarea').on("input", function() {
$(this).parents('.row').find('input[name=comment_button {{$post->id}}]').prop('disabled', $(this).val() == '');
});
});
</script>
The HTML 1 code explains how the HTML 2 code is repeated based on the number of objects in $postList.
What I'm trying to do is disable the button corresponding to the textarea, as long as its textarea is empty, but I do not get the desired result, because when I fill in any textarea, all the buttons are re-abilitated, and that's not what I want. For reasons of data extrapolation, I cannot change the name of the textarea and I would like this script works only on the submit button in HTML 2.
To explain better my problem, I'll made an example:
I have cycled 3 times HTML 2 by HTML 1, so I'll have:
Textarea(id="comment_content 1") - Button (name="comment_button 1")
Textarea(id="comment_content 2") - Button (name="comment_button 2")
Textarea(id="comment_content 3") - Button (name="comment_button 3")
If I want to write in the 2nd textarea with id comment_content 2, then I will have to enable only the button adjacent to that textarea, comment_button 2. I hope my problem is clear.

You're including the same external script and same inline script multiple times, as many times as there are posts. This is inefficient, you should include the external Javascript only once per page.
You can refactor this code to address your bug by creating a listener that listens to all textareas and then uses a data attribute on the textarea to determine which button should have a state change.
Step 1: Add the post ID to the textarea in a data attribute
<textarea data-post="{{ $post->id }}"
class="form-control"
placeholder="Post a comment"
id="comment_content {{$post->id}}"
name="comment_content" rows="1"></textarea>
Step 2: Add the post ID to the button in a data attribute
<input data-post="{{ $post->id }}"
type="submit"
name="comment_button {{$post->id}}"
class="btn btn-primary"
value="Comment"
style="background-color: #228B22;"/>
Step 3: Refactor your Javascript to use the data-post value when determining what the user is interacting with, e.g:
$(document).ready(function() {
$('#msform > textarea[data-post]').on("input", function() {
var id = $(this).data('post');
$('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
});
});
Here's an example of how it'll work, click "Run code snippet" to see it in action.
$(document).ready(function() {
$('textarea[data-post]').on("input", function() {
var id = $(this).data('post');
$('input[data-post="' + id + '"]').prop('disabled', $(this).val() == '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<textarea data-post="1"></textarea>
<input data-post="1" type="submit" disabled="true"/>
</div>
<div>
<textarea data-post="2"></textarea>
<input data-post="2" type="submit" disabled="true"/>
</div>
<div>
<textarea data-post="3"></textarea>
<input data-post="3" type="submit" disabled="true"/>
</div>

how to change input type with onclick event in javascript

I have a check box and a text box in same row. Initially the type of the text box will be hidden, When I click the check box the type of the text box should change from hidden to text. if I unchecked it should change from type text to hidden. How can I do this? here is my code:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="checkbox" name="Customer_Web" value="yes" style="float:left;"> <h4 align="left" style="font-size:16px; margin-left:20px !important;">Web Designing</h4>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="hidden" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md" >
</div>
</div>
</div>

Instead of changing the type of input you are probably looking for visibility of input type text, you can set display to none or block or use jQuery method show and hide.
Live Demo
$('.row :checkbox').change(function(){
$('.form-control.input-md')[0].style.display = this.checked ? 'block' : 'none';
});

Change the type of text box from hidden to text.
HTML
<input type="text" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md hidden" >
JQUERY/JAVASCRIPT
$(document).ready(function(){
$('input[name=Web_Designing_Details]').hide();
$('input[name=Customer_Web]').change(function(){
if( $(this).is(":checked"))
{
$('input[name=Web_Designing_Details]').hide();
}
else
{
$('input[name=Web_Designing_Details]').show();
}
});
});

If you want to hidden the input (don't care about the type), you can use toggleClass as below:
$('YOUR_INPUT').toggleClass('hidden', $('YOUR_CHECKBOX').is(':checked'));

Use jQuery to show and hide it depending on state of checkbox
$('#nameOfElement').show();
$('#nameOfElement').hide();

Conditionally Show/Hide Table Row based on yes/no radio button

I have a simple html form with a series of questions in a table. If a user answers yes to a yes/no radio button question I then want to show a hidden row that allows them to enter details into a textarea field. If they click No the textarea input should be cleared and hidden again.
Here's my html form with one yes/no question and one hidden row for more details if they click yes:
<form class="form-horizontal" action="#" method="post" id="questionForm">
<input type="hidden" name="recid" value="1">
<table class="table table-condensed table-hover table-bordered">
<tr>
<td><strong>Question 1</strong></td>
<td>please answer yes or no to this question</td>
<td>
<div class="controls">
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="Yes" required>Yes </label>
<label class="radio inline">
<input type="radio" name="question1" id="question1" value="No" required>No </label>
<label for="question1" class="error"></label>
</div>
</td>
</tr>
<tr class="question1yes">
<td></td>
<td>Please describe this and when it started</td>
<td>
<div class="controls">
<textarea name="question1Details" rows="3"></textarea>
<label for="question1Details" class="error"></label>
</div>
</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Continue</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
Here's my current script that isn't working:
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length != 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
I've setup a jsFiddle here that demonstrates my form as it currently stands. My optional row is starting as hidden but is not becoming visible when you click the yes radio button.

You can't have 2 elements with the same ID, to select them you can use $('.controls input[type="radio"]') or a class selector exemple $('.radio').

Your radio inputs have identical IDs, and that is not valid HTML. Also, it is breaking your code, because you can't manipulate them independently.
My advice:
Append _y and _n (or whatever you prefer) to the IDs, respectively. (Or use any other unique ID)
Bind the click events to the new IDs.
Code:
$("#question1_y").click(function () {
$(".question1yes").show();
});
$("#question1_n").click(function () {
$(".question1yes").hide();
$(".question1yes textarea").val("");
});

Try this
$().ready(function() {
// validate the form when it is submitted
$("#questionForm").validate();
if($("#question1:checked").length > 0){
// yes is checked... show the dependent fields
$(".question1yes").show();
}else{
// hide it and blank the fields, just in case they have something in them
$(".question1yes").hide();
$("#question1Details").val("");
}
$("#question1").click(function(){
// show the dependent fields
if($(this).val() == "Yes"){
$("#question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
});
Demo

try this following it working as it should be
$("input:radio[name=question1]").click(function(){
// show the dependent fields
if(this.value == "Yes"){
$(".question1yes").show();
}else{
// hide the dependent fields and blank them
$(".question1yes").hide();
$("#question1Details").val("");
}
});
the problem is you are calling $("#question1yes").show(); instead of $(".question1yes").show(). question1yes is class implemented on tr not id.
Hope it will help you