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>
Related
So, i have a form with 3 radio buttons. Depending on which option the user selects (he can only choose one), there can be 3 situations:
if he selects the first one, when he submits the form, he gets redirected to a new URL.
if he selects the second one, a div appears (and then disappears).
if he selects the third one, a div appears (different from the previous one), and then it also disappears.
My HTML:
<form>
<div class="radio">
<label><input type="radio" name="paypal" value="paypal"</label>
</div>
<div class="radio">
<label><input type="radio" name="money" value="money"></label>
</div>
<div class="radio">
<label><input type="radio" name="mastercard" value="mastercard"></label>
</div>
</form>
<button type="button" id="button1" name="button">Check</button>
My JQuery:
$('#button1').click(function() {
var value = $(this).val();
if (value == 'paypal') {
window.location.assign("http://www.paypal.com");
}
else if (value == 'money') {
$('.div2').show('slow');
$('.div2').fadeOut(4000);
}
}
else if (value == 'mastercard') {
$('.div1').show('slow');
$('.div1').fadeOut(4000);
}
But something is not working in here, and I can't figure out what or where.
EDIT: No error, the JQuery code just doesn't work. Whatever option I choose, when I submit nothing happens.
By using var value = $(this).val(); inside the button click, you are actually taking the value of the button itself which is not you are intending to do.
Make all radio button name same. Try the following code:
$('#button1').click(function() {
var value = $('input[name=myRadio]:checked').val();
if (value == 'paypal') {
console.log(value);
window.location.assign("http://www.paypal.com");
}
else if (value == 'money') {
console.log(value);
$('.div2').show('slow');
$('.div2').fadeOut(4000);
}
else if (value == 'mastercard') {
console.log(value);
$('.div1').show('slow');
$('.div1').fadeOut(4000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio">
<label><input type="radio" name="myRadio" value="paypal">Pay Pal</label>
</div>
<div class="radio">
<label><input type="radio" name="myRadio" value="money">Money</label>
</div>
<div class="radio">
<label><input type="radio" name="myRadio" value="mastercard">Master Card</label>
</div>
</form>
<button type="button" id="button1" name="button">Check</button>
I would suggest using submit button along with the submit form event like below to make it work exactly as you like, and group the radio buttons by assigning similar names, and try to reduce the if else and make it more readable like the code below
let formEvents = {
paypal: function() {
console.log('redirecting');
//uncomment the following line when you use it in your script
//window.location.assign("http://www.paypal.com");
},
money: function() {
$('.div2').show('slow', function() {
setTimeout("$('.div2').fadeOut(4000)", 500);
});
},
mastercard: function() {
$('.div1').show('slow', function() {
$('.div1').fadeOut(4000);
});
}
}
$('form').on('submit', function(e) {
e.preventDefault();
var value = $(this).find('input:radio:checked').val();
if (formEvents.hasOwnProperty(value)) {
formEvents[value].call(this);
}
});
.div1,
.div2 {
display: none;
background: #c8c8c8;
border: 2px dashed #000;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio">
<label><input type="radio" name="selection" value="paypal">paypal</label>
</div>
<div class="radio">
<label><input type="radio" name="selection" value="money">money</label>
</div>
<div class="radio">
<label><input type="radio" name="selection" value="mastercard">mastercard</label>
</div>
<button type="submit" id="button1" name="button">Check</button>
</form>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
I want to show input group title if at least one checkbox is checked, and hide title if no checkboxes checked. Each group has his own title and data-value. There may be 5+ input groups.
Here is the codepen: [Example code here][1]
[1]: https://codepen.io/anon/pen/JyrQgW
$(document).ready(function(){
});
.output {
margin-top:45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
enter code here
At the end, I'm not so good with JS/Jquery but I was trying to make it work for a few hours and have a feeling that I go very deep but there is a 2 line solution.
Thanks for help
I this what you are looking for?
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".group-block").each(function() {
$(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
})
}
It will check if any checkbox has been checked on both .ready() and .change() statement, and show or hide the title depends on the result.
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".group-block").each(function() {
$(this).find(".group-title").css("display", $(this).find("input[type=checkbox]:checked").length ? "block" : "none")
})
}
.output {
margin-top: 45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Demo 2 from coment
$(document).ready(function() {
check()
});
$("input[type=checkbox]").change(function() {
check()
})
function check() {
$(".output").text("");
$(".group-title").hide();
$(".group-block").each(function() {
if ($(this).find("input[type=checkbox]:checked").length)
$(".output").text($(".output").text() + $(this).find(".group-title").text())
})
}
.output {
margin-top: 45px;
}
<div class="group-block" data-value="1">
<h1 class="group-title" data-value="1">group1</h1>
<input type="checkbox" data-value="1">item1
<input type="checkbox" data-value="1">item2
<input type="checkbox" data-value="1">item3
<input type="checkbox" data-value="1">item4
</div>
<div class="group-block" data-value="2">
<h1 class="group-title" data-value="2">group2</h1>
<input type="checkbox" data-value="2">item1
<input type="checkbox" data-value="2">item2
<input type="checkbox" data-value="2">item3
<input type="checkbox" data-value="2">item4
</div>
<div class="output">HERE SHOW TITLES</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
$(document).ready(function(){
$('.group-block h1').hide();
$('.output').click(function(){
$('.group-block h1').hide();
$('input[type=checkbox]:checked').closest('.group-block').find('h1').show();
});
});
Suggestion: You may want to hide the titles initially with CSS.
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.
$(document).ready(function(){
$(".registration_info input").click(function(){
if($(this).prop("checked")){
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
}
});
});
// -------- dealer area --------
$(document).ready(function(){
$("#area").click(function(){
if($(this).is(":checked")){
$("#some_area").show();
}
else
$("#some_area").hide();
});
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
Now, I have three checkbox and only can have one checked at the moment.
Also, there is a gray color area will show out when "Item2" was checked.
When I check item2 first (the gray area show) then check item1 or item3, the item2 will un-check but the gray color area still show out.
How to not show gray area when item2 is not checked?
You can use jquery toggle when user click another checkbox. You can sum it up to this:
$(".registration_info input").click(function() {
if ($(this).prop("checked")) {
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
}
//here toggle #some_area element according to check status
$("#some_area").toggle($("#area").prop("checked"));
});
#some_area {
width: 200px;
height: 200px;
background-color: #f2f2f2;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1" />Item1</label>
<label>
<input type="checkbox" value="Item2" id="area" />Item2</label>
<label>
<input type="checkbox" value="Item3" />Item3</label>
<div>
<div id="some_area">Some_area</div>
</div>
</div>
p.s. By the way why you don't use radio buttons instead?
It can be done within the .registration_info click event:
$(document).ready(function(){
$("#some_area").hide();
$(".registration_info input").click(function(){
$("#some_area").hide();
if($(this).prop("checked")){
$(".registration_info input:checkbox").prop("checked", false);
$(this).prop("checked", true);
if ($(this).attr('id')=='area'){
$("#some_area").show();
}
}
});
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
You should bind a change handler, not a click handler:
$('.registration_info').on('change', function(e) {
$(this).find('input').not(e.target).prop('checked', false);
$('#some_area').toggle($('#area').prop('checked'));
});
#some_area {
width:200px;
height:200px;
background-color: #f2f2f2;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="registration_info">
<label>
<input type="checkbox" value="Item1">Item1
</label>
<label>
<input type="checkbox" value="Item2" id="area">Item2
</label>
<label>
<input type="checkbox" value="Item3">Item3
</label>
<div>
<div id="some_area">Some_area
</div>
</div>
</div>
Ok, first of all, you can use radio inputs for doing toggles...
Second, you are calling the click event only on "#area" so the check won't happen when you click a different element, it will happen only when you uncheck/check the "#area" element.
To work around this, you can place a class on each checkbox input and do this:
$(document).ready(function(){
$(".some-class").click(function(){
if($("#area").is(":checked")){
$("#some_area").show();
}
else
$("#some_area").hide();
});
});
Here is a solution using only 2 lines of CSS and no javascript at all. To implement this, I slightly modified your HTML to make the input a sibling of the final div you're targetting or one of its parents, allowing me to use ~ , the "general sibling" selector.
#some_area {display: none;}
#area:checked ~ div #some_area {display:block;}
<div class="registration_info">
<input type="checkbox" value="Item1" id="item1"><label for="item1">Item1</label>
<input type="checkbox" value="Item2" id="area"><label for="area">Item2</label>
<input type="checkbox" value="Item3" id="item3"><label for="item3">Item3</label>
<div>
<div id="some_area">Some_area</div>
</div>
</div>
I have some radio buttons.
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
</div>
What I'm trying to do is, appending the <div class="user"> with an <a><a/> when the radio button inside that div is checked. And when i choose another radio button, I want to remove the last inserted <a><a/> and insert a new one to the newly selected radio button's parent div.
I've tried something like this but I couldn't get it to work:
<script>
$('.user').click(function () {
if (!$(".user-radio").is(':checked')) {
$(this).append('<a></a>');
}
})
</script>
See DEMO
$('.user-radio').change(function () {
$('.user a').remove();
$('.user-radio:checked').parent().append('<a>hello</a>');
});
I prefer to show and hide instead of append and remove elements all time.
And use change instead.
html
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>BLABLA</p>
blabla
</div>
js
$('.user').change(function () {
$("a").hide();
$("a", this).show();
});
css
.user a {
display: none;
}
demo
<script>
$('.user-radio').click(function () {
$('.user > a:last-child').remove()
if ($(this).is(':checked')) {
$(this).parent().append('<a>test</a>');
}
});
</script>
http://jsfiddle.net/s7eRz/
Here i have done complete bins. Demo link as below:
Demo: http://codebins.com/bin/4ldqp93
HTML:
<div class="user">
<input type="radio" class="user-radio" name="user" value="user" />
<p>
BLABLA
</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>
BLABLA
</p>
</div>
<div class="user">
<input type="radio" class="user-radio" name="user" value="user"/>
<p>
BLABLA
</p>
</div>
CSS:
.user p{
display:inline-block;
marign:0px;
padding:0px;
}
input{
padding:0px;
}
.user{
border:1px solid #f53322;
color:#333;
background:#a3f7a2;
}
.user a{
color:#112288;
font-weight:bold;
display:block;
padding:5px;
}
JQuery:
$(function() {
$('.user-radio').change(function() {
if ($(this).is(':checked')) {
$('.user a').remove();
$('.user-radio:checked').parent(".user").append("<a href='javascript:void(0);'>Add New Link</a>");
//Another Alternate way is
/* $('.user-radio:checked').closest(".user").append("<a href='javascript:void(0);'>Add New Link</a>"); */
}
});
});
Demo: http://codebins.com/bin/4ldqp93
remove the ! operator and change the first selector from ".user" .user-radio and then append the <a>link</a> to the parent of $(this) element:
$('.user-radio').click(function () {
if ($(this).is(':checked')) {
$(".user a").remove();
$(this).parent().append('<a>dwd</a>');
}
});