We Keep Coding

On input type=radio checked, add a class to input=text

How can I link a radio button and a text input filled so when the radio is selected the text in the input text area will also change to lets say... red-bold?
I know the logic is:
When radio-A and input-text-A is checked, add CSS class to input-text-A.
When unchecked remove class. If radio-B is selected change input-text-B, and so on...
But right now the simple script targets all text inputs.
$('input[type=text]').addClass('red');
.red {
color: red;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-inline">
<label class="" for="">
<input class="" type="radio" name="answer-Q1" value="option1"> A. </label>
<input type="text" name="answers" class="" placeholder="" required>
</div>
<br>
<div class="form-inline">
<label class="">
<input class="" type="radio" name="answer-Q2" value="option1"> B. </label>
<input type="text" name="answers" class="" placeholder="" required>
</div>

Give your markup, there's actually no need to add any classes or use javascript, you can do what you want with pure CSS:
input[type="radio"]:checked + input[type="text"] {
color: red;
font-weight: bold;
}
As for how to add the class with jQuery, I tend to write "robust" solutions that are maybe a bit longer, but are not as "brittle" (meaning: if markup changes a bit, the script will still work). The way I would write this - assuming no control over markup - would be using jQuery's closest and find to locate the target text inputs:
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of all inputs that are radio buttons
jQuery('input[type="radio"]').on('change', function() {
// find the text input
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't one, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
However, if I DID have control over markup, I would add a class to the radio input element, and use that to both make the script more "generically" useful, as well as narrow down the scope of which inputs were being bound (which would allow this same script to work effectively on checkboxes + text inputs as well):
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of any inputs with the "watch-change" class
jQuery('input.watch-change]').on('change', function() {
// find the text input. Note, this would find multiple text inputs if they existed.
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't a text input to work with, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
And, honestly, with a better understanding of your project scope, it might be possible to write an even more efficient, re-usable snippet of script.

Do this:
$("input[type=radio]").on("change", function(e) {
if (e.currentTarget) {
e.currentTarget.next("input[type=text").addClass("red");
}
});

Here is the working code.
$('input:radio').click(function() {
$('label:has(input:radio:checked)').addClass('rightAnswer');
$('label:has(input:radio:not(:checked))').removeClass('rightAnswer');
});
.container {margin:0 auto; margin-top:50px;}
.rightAnswer {font-weight:bold; color:#2979FF;}
.inputAnswers {width:200px;}
.block {display:block;}
input[type="radio"]:checked + input[type="text"] {
color: #2979FF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> A.
<input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label>
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> B.
<input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label>
<label class="block" for="answer-Q1A">
<input type="radio" class="" name="answer-Q1" value="1"> C.
<input type="text" name="answers" class="inputAnswers" id="answer-Q2A" placeholder="" required></label>
</div>

jQuery toggle won't work for checkbox, div remains display:block

I have an input checkbox field and when the checkbox changes (user clicks or unclicks) the div below should toggle. In my style sheet I have the div paypalInputArea as display:none and when the checkbox in clicked, it should toggle, however I can't seem to get it to work. Can anyone see what is wrong with my code?
Here is my html:
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea">
<isinclude template="includes/paymentmethodsinclude" />
</div>
And here is my jQuery:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
app.paymentAndReview.setCOContinueBtn(true);
$("#paypalPaymentCheckbox").attr('checked','true');
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$("#paypalPaymentCheckbox").removeAttr('checked');
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);

$("#paypalCheckbox").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
//app.paymentAndReview.setCOContinueBtn(true);
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
//app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea" style="display:none">
blabla
</div>
just replace the line:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
with:
$("#paypalCheckbox").on('change', function() {
As you have an ID (which has to be unique) you dont have to use other classes or else to reach it!
you can also remove those lines as the attrribute checked is set as the user clicks on the checkbox
$("#paypalPaymentCheckbox").attr('checked','true');
$("#paypalPaymentCheckbox").removeAttr('checked');
Hope this helps!

It looks like you're missing the class areaExpander from your checkbox

Why is toggleClass not working here?

I'm trying to add / remove a class on click here, but toggleClass is not working as I'm expecting it to. On the contrary, addClass works fine, but I need it to remove the class on the second click.
$('.label1').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).toggleClass('checked');
$checkItem.prop("checked", !$checkItem.prop("checked"));
})
$('.label2').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).addClass('checked');
$checkItem.prop("checked", !$checkItem.prop("checked"));
})
Can you tell me what am I doing wrong?
See it in action here: Test jquery.
Thanks!

You can avoid the problem and simplify your logic by instead hooking to the change event of the checkbox. This then lets you set the checked class on the parent label based on the state of the checked property.
Using change over click on the checkbox is also much better for meeting accessibility standards as it allows users who navigate using the keyboard to trigger the same effects in the UI. Try this:
$(':checkbox').on('change', function() {
$(this).closest('label').toggleClass('checked', this.checked)
});
.checked {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="checkbox">
<label class="label1">
<input type="checkbox">
Check me out
</label>
</div>
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>
</form>

Here you can do it like this.
Try this example hope it will helps you.
$('.label1').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
$(this).toggleClass('checked');
if($(this).hasClass('checked')) {
$checkItem.prop("checked", true);
} else {
$checkItem.prop("checked", false);
}
})
$('.label2').on('click', function() {
var $checkItem = $(this).find('input[type=checkbox]');
if($(this).hasClass('checked')) {
$checkItem.prop("checked", false);
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
$checkItem.prop("checked", true);
}
})
.checked {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="checkbox">
<label class="label1">
<input type="checkbox">
Check me out
</label>
</div>
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>
</form>

The checkbox is inside you label so when it gets clicked it is clicking the checkbox too.
$('.label1, .label2').on('change', function() {
$(this).toggleClass('checked');
})
https://codepen.io/ankurace/pen/OgoQLG

This is a compact solution
$('input[type=checkbox].BorderRed').change(function() {
$($(this).parent()).toggleClass('checked');
});
NEW checkbox Object,
if you wont the effect
<div class="checkbox">
<label class="label2">
<input class="BorderRed" type="checkbox">
Check me out
</label>
</div>
if you dont wont the effect
<div class="checkbox">
<label class="label2">
<input type="checkbox">
Check me out
</label>
</div>

Javascript set value of class & hidden input in nested divs

I have a span class "checkbox" and an attribute "value" associated with a hidden input field, both of which are contained within nested divs.
By default the checkbox is unchecked but I would like to change the span class to "checkbox active" and the input value to "1" so that it is checked and rendered to reflect that change.
This code is generated by a Wordpress plugin and there are no ids.
What's the best method to set these two attributes?
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="hidden" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>

As per your requirement.Why dont you set like this ??
$(document).ready(myfunc);
function myfunc()
{
$('.checkbox').addClass('checked');
$('.true_false').val('1');
}
if($('.checkbox').hasClass('checked'))
{
alert($('.true_false').val());
}
Click on the demo below to see that value 1 is getting set and checked class is getting set.
You can do this on click of a button or checking a checkbox.
Click Here

Try this:
Also for demo purpose, I have kept input as text instead of hidden.
Fiddle
(function(){
$(".checkbox").on("click",function(){
$(this).toggleClass("checked");
var val = 0;
val = $(this).hasClass("checked")?1:0;
$(this).parent().find(".true_false").val(val);
});
})()
.checked{
background: blue!important;
}
.checkbox{
width:20px;
background:#eee;
padding:5px;
border:1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>

<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator="">
<div class="cfs_true_false ready">
<span class="checkbox"></span>
<span>Is this a news item?</span>
<input type="checkbox" id="checkbox" />
<input type="text" name="cfs[input][6][value]" class="true_false" value="0">
</div>
</div>
$(document).ready(function(){
$('#checkbox').change(function(){
var checkboxValue = $(this).is(':checked');
if(checkboxValue == true){
$(".true_false").val('1');
alert('1');
}else{
$(".true_false").val('0');
alert('0');
}
});
});

clicking event not working on clicking inner span element

I have dom constructed like this . there are added dynamically depending on the count from the database.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
<div>
<input/>
<label>
<span></span>
</label>
</div>
This is my DOM structure
When I click on the inner span element click event not working. When I keep the span out side of the div as an independent element it works fine. Any suggestions why click is not raising in the inner span element
This is my click event
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});

The 'span' element doesn't have a .todo-remove class, in this case the event wont be called. Try to add the class to span and add some style like this:
padding: 20px;
display: block;
float: right;
Of course, you'll change this code later.

Just try this javascript. It will work for you.
$("label[for='check1']").click(function(){
alert("deleted");
});

The following code woks for me:
http://jsfiddle.net/Lknca8f1/
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete"></span>
</label>
</div>
.todo-remove{
padding:20px;
background: #f00;
cursor:pointer;
}
$(function(){
$(document).on('click','.todo-remove', function(){
$(this).closest('.todo-task').remove();
});
})

Working code link Codepen
My be you are registered event before DOM ready.
Please register after ready event.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> Click
<span class="todo-remove mdi-action-delete">Span</span>
</label>
</div>
$(document).ready(function(){
$(document).on('click', '.todo-remove', function () {
alert( 'Delete');
});
});

A workaround is to set the z-buffer of the inner span to -1
i.e.
<div class="todo-task">
<input type="checkbox" id='check1' />
<label for='check1'> asdasdasdasdasd
<span class="todo-remove mdi-action-delete" style="z-index:-1"></span>
</label>
</div>