We Keep Coding

Only give the element which i click on a style

i am making a filter for my page.
Everything works but the only problem i cant get solved is how to give a style to the button i press on. When i try it with jQuery it gives all the buttons the style.
Here is the code I am using:
<div class="filter_options">
<!-- <div class="map_trigger"></div>
<div class="list_trigger active"></div>-->
<h3 style="display: inline-block; margin-top: 15px!important;">Kies een discipline: </h3>
<div id="uwpqsf_id">
<form id="uwpqsffrom_43">
<div class="uform_title">Projecten</div>
<input type="hidden" name="unonce" value="8fa32e7b04">
<input type="hidden" name="uformid" value="43">
<input type="hidden" id="uajaxdiv" value=".projecten_list">
<div class="uwpqsf_class " id="tax-radio-0">
<span class="taxolabel-0">Disciplines</span>
<input type="hidden" name="taxo[0][name]" value="Werkgebied">
<input type="hidden" name="taxo[0][opt]" value="">
<label>
<input type="radio" id="tradio-0-0" class="tradio-0" name="taxo[0][term]" value="uwpqsftaxoall">Disciplines</label>
<label>
<input type="radio" id="tradio-0-1" class="tradio-0" name="taxo[0][term]" value="bagger">Bagger</label>
<label><input type="radio" id="tradio-0-2" class="tradio-0" name="taxo[0][term]" value="groen">Groen</label>
<label><input type="radio" id="tradio-0-3" class="tradio-0" name="taxo[0][term]" value="infra">Infra</label>
<label><input type="radio" id="tradio-0-4" class="tradio-0" name="taxo[0][term]" value="milieutec">Milieutec</label></div>
<script type="text/javascript">jQuery(document).ready(function($) {
var formid = "#uwpqsffrom_43";
$(formid).find('input, textarea, button, select').change(function(){
process_data($(this));
})
;})</script>
<div style="clear:both"></div></form></div> </div>
I need to get a style on the label which i click on, i have tried with onclick label function but it is giving all the labels the css.
Here is the code i have tried:
$( document ).ready(function() {
$("label").click(function(){
$("label").css("background-color: black;");
});
});
I also can't add any new ID or classes to the HTML because its being generated by a plugin ..

if you are pushing the label by plugin you need to change you code like this way
$(function(){
$(document).on('click', 'label', function(){
$(this).css("background-color", "red");
});
});
$(function(){
$(document).on('click', 'label', function(){
if( $('label').hasClass('red')){
$(this).each(function(index, element) {
$('label').removeClass('red');
});
}
$(this).addClass('red')
});
});
.red {
background:red;
}
<label> click me </label>
<label> click me </label>
<label> click me </label>
<label> click me </label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Use $(this) inside an event handler to reference just the single element which fired the event.
$( document ).ready(function() {
$("label").click(function(){
$(this).css("background-color: black;");
});
});

Parameter passed in to the .css function is incorrect.
$(document).ready(function() {
$("label").click(function(){
$(this).css("background-color", "black");
});
});

$(document).ready(function() {
$("label").click(function(){
$("label").css("background-color: black;");
});
});
change to
$(document).ready(function() {
$("label").click(function(){
$(this).css("background-color: black;");
});
});
as #deep said.

Toggle Div visibility upon radion button select issue

I have managed to create a Div visibility toggle with the following code :
$('input[name="type"]').on('change', function() {
var show = $(this).val();
$(".typechoice").hide();
$("#"+show).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="type" value="solo" checked ;> solo<br>
<input type="radio" name="type" value="company" ;> company<br>
<div id="solo" class="typechoice">Solo</div>
<div id="company" class="typechoice">Company</div>
It works perfectly but not when the page is loaded the first time (both Div are visible instead of a single Div only then). I think it is because onchange is used in the JS (I am no expert and grabbed bit on different stack overflow threads)
How can I have this code work when a radio button is already checked on the page before the user action any?

Just trigger the change event of checked checkbox using the following line to hide the other div initially.
$('input[name="type"]:checked').change()
FULL CODE
$('input[name="type"]').on('change', function() {
var show = $(this).val();
$(".typechoice").hide();
$("#" + show).show();
})
$('input[name="type"]:checked').change()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="type" value="solo" checked ;> solo
<br>
<input type="radio" name="type" value="company" ;> company
<br>
<div id="solo" class="typechoice">AAAA</div>
<div id="company" class="typechoice">BBBB</div>

It would be simplest to just call change() on the checked radio in document.ready()
$(function(){
$('input[type=radio]:checked').change();
});
$('input[name="type"]').on('change', function() {
var show = $(this).val();
$(".typechoice").hide();
$("#"+show).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="type" value="solo" checked ;> solo<br>
<input type="radio" name="type" value="company" ;> company<br>
<div id="solo" class="typechoice">Solo</div>
<div id="company" class="typechoice">Company</div>

You could use something like this, too:
$('#'+$('input[name="type"]:checked').val()).show();
Looks ugly, but it works.
Demo: https://jsfiddle.net/qnwudaeL/

Maybe you can extract the change function and call it when page is loaded:
function showDiv() {
var show = $("input[name='type']:checked").val();
$(".typechoice").hide();
$("#"+show).show();
}
$(document).ready(function () {
$('input[name="type"]').on('change', showDiv)
showDiv();
});

How to hide a div using radio button

I want to hide the an entire field represented by a div id. I tried doing it, but it doesnt work. I could get it working when i used dropdown list and select. Here is my code:
HTML:
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" id="signature" value="show" checked="checked"/>
Show Signature
<br><br>
<input type="radio" class="flat" name="botsign" id="signature" value="hide" />
Hide Signature
</p>
</div>
JS:
<script>
$("input[name='botsign']").change(function () {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
</script>
CSS:
#Sigbox{
display:none;
}

Try Like This
<div class="form-group">
<p>
<input type="radio" class="flat" name="botsign" value="show" checked="checked"/> Show Signature<br><br>
<input type="radio" class="flat" name="botsign" value="hide" /> Hide Signature
</p>
</div>
<script>
jQuery(document).ready(function($){
$("input[name='botsign']").click(function() {
if ($(this).val() == 'show') {
$("#Sigbox").show();
} else {
$("#Sigbox").hide();
}
});
});
</script>

Thank you for helping me out. The code I posted does work fine, but there where some Javascript conflicts as I was using around 6 of them. I tried the above answers and even that didnt work, then I saw #AdriánDaraš comment and I cross checked with all the other Javascripts. And now its working fine as I removed the Javascript I was using to make the radio buttons look good.
Thanks a lot everyone.

Added the jquery cdn and a div box with an id to test the hide function. Then i used jQuery() that it's the normal way to call jquery.
The change function listen on both input and check the value of the input to know if must hide or show the box.
Here your solution:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="form-group">
<p>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="show"
checked="checked"/>
Show Signature
<br><br>
<input type="radio"
class="flat"
name="botsign"
id="signature"
value="hide" />
Hide Signature
</p>
</div>
<div id="Sigbox">
hello i'm your sign box
</div>
<script>
jQuery("input[name='botsign']").change(function () {
if (jQuery(this).val() == 'show') {
jQuery("#Sigbox").show();
} else {
jQuery("#Sigbox").hide();
}
});
</script>
</body>
</html>

How to switch jQuery class in HTML based on Radio Button choice

I have a jQuery class that manipulates an image whenever it is applied to it, like this:
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="myJQclass1" />
</div>
This works perfectly on its own, however I also have 2 other jQuery classes: myJQclass2 and myJQclass3, these manipulate the image differently than myJQclass1.
What I’m trying to do is create 3 radio buttons and the user will be able to switch the class used depending on what radio button they select (this will change how the image looks).
This is my code so far:
<script>
function check(effect) {
document.getElementById("answer").value=effect;
}
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
This isn’t working, I think I’m making a basic error, but I’m not sure what it is.
I’ve never worked with radio buttons nor jQuery before, so I would really appreciate any help with this.
Thank you in advance!

Use jQuery removeClass()/addClass(). Use the overload of removeClass() which allows you to remove multiple classes. Then add the class passed into the function
function check(effect) {
$('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
$('.answer').addClass(effect);
}
.myJQclass1{
color:yellow;
}
.myJQclass2{
color:green;
}
.myJQclass3{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>

You could simplify things a bit more:
$('input:radio').click(function() {
var index = $(this).index('input:radio') + 1;
$('.answer').attr('class', 'answer myJQclass' + index);
});
.myJQclass1 {
color: red;
}
.myJQclass2 {
color: blue;
}
.myJQclass3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="effect" />Change Colour
<br/>
<input type="radio" name="effect" />Change Brightness
<br/>
<input type="radio" name="effect" />Change Contrast
<br/>
<br/>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>

JavaScript display a div when I click an input?

I want to display a block div when I clicked an input field.
<input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br>
<div class="input" style="display: none;"> Please help for our company! </br> <input type='text' name='help'> </br> </div>
How can I execute it?

Here is a simple non-jquery dependent solution:
<input class="indifferent" type="radio" name="decision" value="indifferent" onclick="document.getElementById( 'hidden' ).style.display = 'block' "> Indifferent <br>
<div id="hidden" class="input" style="display: none;"> Please help for our company! <br> <input type='text' name='help'> <br> </div>

$(".indifferent").click(function(){
$(".input").toggle();
});
Each click on .indifferent will change it's display between showing and hiding.

Add the following jQuery.
$('input').on('click', function() {
$('.input').css('display', 'block');
});
JS FIDDLE

I always prefer to add a class when click insteed of a sigle property (to whatever element) as it will allow you to add now or in the future more style to your div. It's more versatil:
$(document).ready(function () {
$('.indifferent').click(function () {
$('.input').addClass("display")
});
});
FIDDLE