Only give the element which i click on a style - javascript

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.

Related

How to make an element with specific class ignore a global listener?

There is a global listener on specific input type:
$('input[type["radio"]').on('change', function() { ... });
But I have another more specific radio input with its own unique_radio class:
<input type="radio" class="unique_radio" name="unique_radio">
It also has its own click listener:
$('.unique_radio').on('click', function() { ... });
When I click it, both listeners trigger the functions, but I need only the function with the unique_radio listener to be triggered.
I have tried using stopImmediatePropagation and off as seen here:
Best way to remove an event handler in jQuery?
But that did not seem to work
Your selector is not working with my jquery but you can see below my sample so you can use it directly. You can use this to ignore input with unique_radio class. Use :not() explain with this you dont have to use preventDefault or return false.
My code;
$('input[type="radio"]:not(.unique_radio)').on('change', function(){
console.log(1);
});
$('.unique_radio').on('change', function() {
console.log(2);
});
Here is if you attach event listener to all radio
$('input[type="radio"]').on('change', function() {
console.log($(this).data('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>
If you want to remove listener on one radio with a particular class you can do it in different way
Here you restrict the execution only for radios which hasn't class unique_radio
$('input[type="radio"]').on('change', function() {
let $target = $(this);
if(!$target.hasClass('unique_radio')) {
console.log($target.data('id'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>
Here if you want to remove the handler
let handler = function() {
console.log($(this).data('id'));
}
$('input[type="radio"]').on('change', handler);
$('.unique_radio').unbind('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>First</label>
<input type="radio" name="unique_radio" data-id="first">
</div>
<div>
<label>Second</label>
<input type="radio" name="unique_radio" data-id="second">
</div>
<div>
<label>Third</label>
<input type="radio" class="unique_radio" name="unique_radio" data-id="third">
</div>

Radio buttons changing class with jQuery

i have and issue with jQuery code for checking which one of the radio buttons is checked and then to change the color to some of them.Also i want to disable buttons after one of them is pressed. My problem i that when i check for example 'A' all the answers becoming red and not 'A' to become green and all the others red.
$(function() {
$('.AncientQ11 [type="radio"]').on('change', function() {
$(document.getElementById("AncientQ1Ans1"))
.prev().addClass('green')
.siblings().addClass('red');
document.getElementById("AncientQ1Ans1").disabled = true;
document.getElementById("AncientQ1Ans2").disabled = true;
document.getElementById("AncientQ1Ans3").disabled = true;
document.getElementById("AncientQ1Ans4").disabled = true;
});
});
.red {color: red;}
.black {color: black;}
.green{color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="AncientQ11">
<label for="AncientQ1Ans1">A</label><br>
<input type="radio" id="AncientQ1Ans1" name="AncientQ1">
<label for="AncientQ1Ans2">B</label><br>
<!--Solution-->
<input type="radio" id="AncientQ1Ans2" name="AncientQ1">
<label for="AncientQ1Ans3">C</label><br>
<input type="radio" name="AncientQ1" id="AncientQ1Ans3">
<label for="AncientQ1Ans4">D</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans4">
</div>
Removing br to use div with display:block; resolve your problem.
But after that if I select B,C or D solution, only the A is green. It's because you need to use $(this) to get the current element.
And I rewrite some parts to correspond to JQuery syntax like #freedomn-m suggests.
$(function() {
$('.AncientQ11 [type="radio"]').on('change', function() {
$(this).prev().addClass('green').siblings().addClass('red');
$("#AncientQ1Ans1").attr("disabled", "disabled");
$("#AncientQ1Ans2").attr("disabled", "disabled");
$("#AncientQ1Ans3").attr("disabled", "disabled");
$("#AncientQ1Ans4").attr("disabled", "disabled");
});
});
.red {color: red;}
.black {color: black;}
.green{color:green;}
.AncientQ11 > div{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="AncientQ11">
<div>
<label for="AncientQ1Ans1">A</label>
<input type="radio" id="AncientQ1Ans1" name="AncientQ1">
</div>
<div>
<label for="AncientQ1Ans2">B</label>
<input type="radio" id="AncientQ1Ans2" name="AncientQ1">
</div>
<div>
<label for="AncientQ1Ans3">C</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans3">
</div>
<div>
<label for="AncientQ1Ans4">D</label>
<input type="radio" name="AncientQ1" id="AncientQ1Ans4">
</div>
</div>

Enable click event when another checkbox is cheched

I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />

Add an animation to a Show/Hide Checked Box

I use this javascrpit code to show/hide a div when a specific checkbox is checked
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
$('#delivery').toggle($('#store').prop('checked'));
}).trigger('init-choice1');
});
How can I add an animation to my delivery div when the choice1 checkbox is checked ?
Here an actual exemple of what result I have without animation : https://jsfiddle.net/6h4u3a1b/
Thanks in advance,
~Quentin
You can do, for example:
$( document ).ready(function(){
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeIn();
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
or instead of the "if ..." simply:
$('#delivery').fadeToggle();
This will show a little flicker at the beginnig so you youd have to add this style rule to prevent it:
.two { display: none }
Replace fadeIn/fadeOut with slideUp/slideDown for a different animation our use jQuery's animate() function to animate whatever CSS rule you want.
Here's my solution: Hope it helps!
$( document ).ready(function(){
$("#delivery").hide();
$(function() {
$('input[name=choice1]').on('click init-choice1', function() {
if ($('#store').prop('checked')) $('#delivery').fadeTo(100, 0.1).fadeTo(200, 1.0);
else $('#delivery').fadeOut();
}).trigger('init-choice1');
});
})
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="one">
<p>
<input name="choice1" type="radio" id="download" checked />
<label for="download">Download</label>
</p>
<p>
<input name="choice1" type="radio" id="store" />
<label for="store">Store</label>
</p>
</div>
<div class="two" id="delivery">
<p>
<input name="choice2" type="radio" id="x" />
<label for="x">Add to X</label>
</p>
<p>
<input name="choice2" type="radio" id="y" />
<label for="y">Add to Y</label>
</p>
</div>

How to work with two checkbox using jQuery

I want to show a div which contains company details inputs and if a user check the input YES then show div and if a user check the input NO then hide div.
I have written some first code for the input checkbox YES and it working fine but if input NO is check the div is still there of which i want to hide it and uncheck the YES input checkbox.
somebody help me modify the script.
JavaScript:
$(document).ready(function (e) {
$("#yes").click(function () {
if($(this).is(":checked")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
HTML:
<p>Do you have a company?
<input name="comorno" type="checkbox" id="yes" form="signupform"> Yes
<input type="checkbox" name="comorno" id="no">No</p>
You need radio button for what you want. Try the following code.
$(document).ready(function (e) {
$("input[name=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno" type="radio" id="yes" value="" form="signupform" checked> Yes
<input type="radio" name="comorno" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>
Or if using checkbox is a necessity for you in this case you can do it this way -
$(document).ready(function (e) {
$("input[name^=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
$("#no").prop("checked", false);
} else {
$("#companydetials").hide();
$("#yes").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno[]" type="checkbox" id="yes" value="" form="signupform" checked> Yes
<input name="comorno[]" type="checkbox" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>
Check this jsfiddle example - http://jsfiddle.net/ko64a3a8/
<input name="check_status" type="checkbox" class="mycheckbox" value="yes"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
});
</script>
Or if you want 'yes' and 'no' options
<label for="statYes">Yes</label>
<input name="check_status" id="statYes" type="checkbox" class="mycheckbox" value="yes"/>
<label for="statNo">No</label>
<input name="check_status" id="statNo" type="checkbox" class="mycheckbox" value="no"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('#myDiv').hide();
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
if($(this).val() == 'yes') {
$('#statNo').removeAttr('checked');
$('#myDiv').show();
}else{
$('#statYes').removeAttr('checked');
$('#myDiv').hide();
}
}
})
});
</script>
UPD: Here is the example http://jsfiddle.net/3L3b580h/
When you click 'yes' it shows the div and unchecks the 'no' (if it checked) and backwards
$(document).ready(function (e) {
$('input[name="comorno"]').each(function()
{
$(this).change(function()
{
$('input[name="comorno"]').prop('checked',false);
$(this).prop('checked',true);
if($('#yes').is(':checked')) {
$('#companydetails').show()
} else {
$('#companydetails').hide()
}
});
});
});
Checkout this topic: make checkbox behave like radio buttons with javascript
Fiddle: http://jsfiddle.net/ojensc2y/

Categories