Develop Reference

Using JQuery to change CSS value of all divs with same class but only if a contained checkbox is checked

I'm new to this world and finding myself on a very steep learning curve.
I've managed to sort all issues so far by looking through this site but this one has me stumped! I've given it a full day and can't progress so i'm hoping someone can help.
I've 2 roles, student and assessor.
Student completes their work and then the assessor marks it and a checkbox is ticked if the answer is sufficient.
Student then looks at their work and should see a green background to the answer with the checked checkbox, no background to those with unchecked.
At the moment my code is changing the background colour of all divs with the same class regardless of if the checkbox is checked or not.
Any help as to where i'm going wrong would be very much appreciated.
A sample question within a HTML form:
$(document).ready(function() {
$('.answer').each(function() {
if ($(this).find('input.cb:checked').prop('checked')) {
$('.answer').css("background-color", "#a5de76");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div>
<p></p>
<div class="answer"><textarea id="U1Q1" name="U1Q1" rows="5" cols="70"><?php echo htmlspecialchars($row['U1Q1'])?></textarea>
<?php echo '<input class="cb" type="checkbox" name="n" class="hidden" value="v"' . ($row['U1Q1R']==1 ? ' checked="checked"' : '') . '>';?>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="<?php echo htmlspecialchars($row['U1Q1F'])?>" readonly />
</div>
This is how it currently looks on screen (the checkboxes will be hidden once I have the code working:
student page

You just need to use the current context this and change:
$('.answer').css("background-color", "#a5de76");
to
$(this).css("background-color", "#a5de76");
So, that only current checked answer background color is changed.
Full Code:
$(document).ready(function() {
$('.answer').each(function() {
if ($(this).find('input.cb').prop('checked')) {
$(this).css("background-color", "#a5de76");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-left">1. Describe the procedures in place when a steward supervises spectator entry.</div>
<p></p>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v">
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>
<div class="answer">
<textarea id="U1Q1" name="U1Q1" rows="2" cols="70"></textarea>
<input class="cb" type="checkbox" name="n" class="hidden" value="v" checked>
<input style="color:blue" id="textfield" name="U1Q1F" class="textfields" type="text" value="" readonly />
</div>

Javascript open and hide radio

A little problem that anyone but me can solve with ignorance of JS.
I open various divs after clicking on the payment method, according to the frequency of payments. I also open a div with text inputs.
The problem is that the used JS is applied to everything. So if by input (radio) unpack the div, another independent input (radio) closes it.
Also, if I unpack a div with other radio inputs by input, clicking on any of the divs will close the div again.
Here fiddle - jsfiddle.net/72jzy8gb
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});
.ukaz {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-daruj" action="https://www.darujme.cz/darovat/1320" id="myForm" method="get">
<table class="daruj-form">
<tr>
<td colspan="2" style="text-align:center;font-size:25px;">
<b style="color:#dd4814;">Částka dobrovolného příspěvku</b><br />
</td>
</tr>
<tr>
<td style="text-align:-webkit-right;"><div style="width:147px;" id="castka">
<input name="amount" type="number" style="width: 100px;" value="100"> <span style="display:inline;">Kč</span></div><br /><input name="currency" type="hidden" value="CZK">
<input name="locale" type="hidden" value="cs"></td>
<td style="vertical-align:top;text-align:-webkit-left;"><div class="castky" style="
margin-top: 6px;"><input type="radio" name="frequency" value="once"><div id="jednorazove" style="font-size:13px;color:black;font-weight:bold;display: inline;padding-left: 5px;vertical-align: super;">Jednorázově</div><br>
<input type="radio" name="frequency" value="monthly"> <div id="mesicne" style="padding-left:2px;font-size:13px;color:black;font-weight:bold;display: inline;vertical-align: super;"> Měsíčně</div></div></td>
</tr>
<tr>
<td style="width:50%;">
<input name="firstName" type="text" placeholder="Jméno"><br>
<input name="lastName" type="text" placeholder="Příjmení"><br>
<input name="email" type="email" placeholder="Váš email"><br>
<input name="phone" type="number" placeholder="Telefonní číslo"><br>
<br>
<b>Požadujete potvrzení o daru?</b><br>
<input type="radio" name="wantDonationCertificate" value="1" nazev="adresa"> Ano<br>
<input type="radio" name="wantDonationCertificate" value="0" checked=""> Ne<br>
</td>
<td><div class="1 ukaz">
<input name="street" type="text" placeholder="Ulice a číslo popisné"><br>
<input name="city" type="text" placeholder="Obec/město"><br>
<input name="postcode" type="text" placeholder="PSČ"><br>
</div>
<br>
<div class="once ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem<br>
<input type="radio" name="paymentMethod" value="payu_transfer"> Online platba PayU
</div>
<div class="monthly ukaz">
<b>Výběr platby:</b><br>
<input type="radio" name="paymentMethod" value="proxypay_charge"> Platba kartou<br>
<input type="radio" name="paymentMethod" value="funds_transfer"> Platba převodem
</div>
<b>Chcete zasílat aktuality na email?</b><br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="1" checked=""> Ano<br>
<input type="radio" name="custom[souhlas_se_zasilanim_novinek_svobody_zvirat_a_se_zpracovanim_osobnich_udaju_pro_tyto_ucely]" value="0"> Ne<br>
<input type="submit" value="Odeslat">
</td>
</tr>
</table>
</form>
This is undesirable behavior.
Thanks for help!

You should use an indicator that points on a specific element but not a group of elements.
I used a name of input instead of a type here:
$(document).ready(function() {
$('input[name="wantDonationCertificate"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".ukaz").not(targetBox).hide();
$(targetBox).show();
});
});

Get id of active textfield

If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.
Eg. in following context, I should be able to get id of textbox 3.
Thanks

You can get the currently active element using document.activeElement, so its ID using document.activeElement.id.
Focus on any of the textboxes in the snippet to see how it works:
setInterval(function() {
console.log("Active element: " + document.activeElement.id);
},1000);
<input type="text" name="" id="1">
<br>
<input type="text" name="" id="2">
<br>
<input type="text" name="" id="3">
<br>
<input type="text" name="" id="4">

You can use getAttribute() like the following way:
function myFunc(thatText){
console.log(thatText.getAttribute('id'));
}
<div>
<input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/>
<input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/>
<input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/>
<input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/>
</div>

There can be an onkeyup function. pass this from the DOM and in js use that argument to get id
function getElem(elem) {
console.log(elem.id)
}
<input type="text" name="test" id="1" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="2" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="3" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="4" onkeyup="getElem(this)">

Inactivate Input Text by Selecting Radio Button

If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>

give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example

Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE

You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>

I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.

how do i hide elements without using the visibility function [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to write a code that gives the user more options whenever a button is clicked.
for example say i have a page with two buttons, one "search for books" and another "search for events". If a user clicks on "search for books" button, on the same page right beneath the search button i want different options to appear. I tried using the css visibility:hidden function and switching it back to visibility:visible using a javascript function. It did work but a huge space from the screen was reserved for the hidden elements. The main window buttons were far apart from each other. on one side there was the "search for books" button and far from it there was the "search for events" button.
Here is part of the code
</head>
<div class ="buttons">
<div id="visible">
<input type="button" value="Click To Search Faculty Members" onclick="swapform()" class="button">
</div>
</div>
<div class = "form" id="theform" style="visibility: hidden">
<form name = "type" value="fm" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<span style="box-shadow: 0 0 0 1px white inset;">
<select name="type" >
<option value="fm"> Faculty Members Search </option>
</select>
<tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
<input type="submit" value="Get Info">
</table>
</div>
</span>
</form>
<!-- Book Search !-->
<div class="buttons">
<div id="bvisible">
<input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
</div>
</div>
<div id="thebookform" style="visibility: hidden">
<form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<select name="type">
<option value="ch"> Search for Books</option>
</select>
<tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<input type="submit" value="Get Info">
</table>

Use this instead
display : none
This does the same thing, except the empty space the element takes up.
And looking at the tags, you have jQuery there. You can use .hide() and .show() instead.