jquery onclick button change element background next to check/uncheck action - javascript

Code below makes that on each click all checkboxes which are not disabled, are checked/unchecked. Also at the first click background of chackboxes parents are chanhging to red.
var clicked = false;
var target = jQuery(".editcheckhour:not(:disabled)");
jQuery(".checkalledit").click(function() {
target.prop("checked", !clicked).closest('label').css('background-color','#c00');
clicked = !clicked;
});
On next click I want to change background color back. So the function will not only check/uncheck inputs but also will alternately change checkboxes parents background.
On this JSFIdle demo only first click change backgrounds.
https://jsfiddle.net/xLg7eszb/1/
Is anybody help me do this?

Try using toggleClass()
var clicked = false;
var target = jQuery(".editcheckhour:not(:disabled)");
jQuery(".checkalledit").click(function() {
target.prop("checked", !clicked).closest('label').toggleClass('bgcolor');
clicked = !clicked;
});
label {
background-color: #558;
color: white;
padding: 5px 12px;
}
label > input:disabled {
opacity: 0.5
}
button {
display: block;
margin-top: 20px;
}
.bgcolor {
background-color: #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label>
<input class="editcheckhour" type="checkbox">onet</label>
<label>
<input disabled class="editcheckhour" type="checkbox">two</label>
<label>
<input class="editcheckhour" type="checkbox">three</label>
<label>
<input class="editcheckhour" type="checkbox">four</label>
<button type="button" class="checkalledit">on / off</button>

Its simple. Add one class to label default in your code and define that class as default color in your css file.
<label><input class="editcheckhour defaultColor" type="checkbox"> onet</label>
<label><input disabled class="editcheckhour defaultColor" type="checkbox"> two</label>
<label><input class="editcheckhour defaultColor" type="checkbox"> three</label>
<label><input class="editcheckhour defaultColor" type="checkbox"> four</label>
the defaultColor class will be in css like
defaultColor {
background-color: #558;
}
another new color will be red like this.
newColor {
background-color: red;
}
on button click simply remove the class and add class to labels on status of the button. To maintain button status write code as:
<button type="button" class="checkalledit" data-status="0">on / off</button>
after click it will change label background first and then change self status.
jQuery(".checkalledit").click(function() {
var status = $(this).attr("data-status");
if(status == 0){
target.prop("checked", !clicked).closest('label').removeClass("defaultColor");
target.prop("checked", !clicked).closest('label').addClass("newColor");
$(this).attr("data-status","1");
}
else{
target.prop("checked", !clicked).closest('label').removeClass("newColor");
target.prop("checked", !clicked).closest('label').addClass("defaultColor");
$(this).attr("data-status","0");
}
});

Related

Radio - add class at div when checked

How to add addition class in JS to the div or table , when radio input is checked ?
I would like add class table-selected , to the div class="table-item"
when I checked a radio input .
$(".table-item input").change(function() {
var div = $(this).closest('.table-item');
$(this).is(":checked") ? div.addClass("table-selected") : div.removeClass("table-selected");
});
#test .table-item {
border: solid 1px #666;
height: 25px;
background-color: #CCC
}
#test .table-selected {
border: 1 px solid #F00;
background-color: #00F
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<div class="table-item">
<div><label for="check1"><input type='radio' name='rad' value='1'>1</label></div>
</div>
<div class="table-item">
<div><label for="check2"><input type='radio' name='rad' value='2'>2</label></div>
</div>
<div class="table-item">
<div><label for="check3"><input type='radio' name='rad' value='3'>3</label></div>
</div>
</div>
But this work some wrong , add class , but it does not remove it when unchecked
You have to remove class from other before adding to current. Triggers fire for only that element, so check will run for that element not others.
Update Link: https://jsfiddle.net/m637ndrx/2/
$(".table-item input").change(function() {
var div = $(this).closest('.table-item');
$('.table-item').removeClass("table-selected")
$(this).is(":checked") ? div.addClass("table-selected") : div.removeClass("table-selected");
});
You are just removing the class from the selected div. The else part of that ternary condition would never be satisfied because there div represents the button that you selected.
You need to remove the class from all the divs.
$(".table-item").removeClass('table-selected');
var div = $(this).closest('.table-item');
if ($(this).is(":checked")) {
div.addClass("table-selected");
}
Check here: https://jsfiddle.net/g5o2w47v/

Change one button background color onClick and revert previously clicked button to default background (8 Buttons)

I have a column of 8 buttons and would like only one button to be toggled(yellow) at a time and the rest of the buttons remain default(green).
I am having a bear of a time getting the function to execute on click. Meaning no colors are changing.
I have been using this post How to select and change color of a button and revert to original when other button is clicked
as my reference and has helped me understand querySelectors and changing classes but for the life of me I cant see why my application isnt working.
Console.log('test) fires right after the for loop is called but if put below the onClick it does not fire.
JS
for (button in buttons) {
buttons[button].onclick = function() {
console.log('test')
var yellowButton = document.querySelectorAll(".yellow")[0];
if (this.className == "green") {
if (yellowButton) yellowButton.className = "green";
this.className = "yellow";
}
}
}
HTML
<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>
CSS
button{
width: 100%;
padding: 10px 20px;
margin: 3px;
}
.green{
background-color: green;
}
.yellow {
background-color: yellow;
}
I am expecting to have 1/8 of the buttons to be yellow. That being the clicked button.
Rather than toggling the yellow and green classes - you can simply add a 'highlight' class on click and remove it from the previously clicked button.
This highlight class has the yellow background styling, so that when you click a button it adds the highlight class and yellow background. Then clicking another button removes the highlight class from the first button and applies it to the clicked one.
var buttons = document.querySelectorAll("button");
for (button in buttons) {
buttons[button].onclick = function() {
console.log('test')
buttons.forEach(function(btn){
btn.classList.remove('highlight');
})
this.classList.add('highlight');
}
}
button{
width: 100%;
padding: 10px 20px;
margin: 3px;
}
.green{
background-color: green;
}
.highlight {
background-color: yellow;
}
<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>
I managed to get your code to work. jsFiddle
Make sure you define buttons correctly:
var buttons = document.querySelectorAll(".green");
My problem was in my html, i had to move the script tag to the end of the body to allow loop to occur. Thanks for the help folks!

Adding a class or style to a disabled button

I am disabling a button until atleast one checkbox has been selected like so:
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='button']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
My buttons initial state is disabled but I need it to be like faded out or opacity added to it, im not sure what the best approach would be either do it with adding a class or just adding CSS? im not really sure?
If you mean you want to adjust the appearance of a disabled button, you do that with a CSS attribute presence selector (input[type=button][disabled]) or a CSS :disabled pseudo-class selector (input[type=button]:disabled):
input[type=button][disabled] {
color: red;
opacity: 0.5;
}
/* or: */
input[type=button]:disabled {
color: red;
opacity: 0.5;
}
The attribute selector works because a disabled button has a disabled attribute, and an enabled one does not. But in modern code, I'd probably use :disabled instead.
Example:
var btn = $("#toggle");
setInterval(function() {
btn.prop("disabled", !btn.prop("disabled"));
}, 1000);
/* Here I've used each of the two possible options
to provide half of the styling you wanted.
You'd obviously just choose one of them and use
it to handle both parts of the styling.
*/
input[type=button][disabled] {
color: red;
}
input[type=button]:disabled {
opacity: 0.5;
}
<input type="button" value="This is enabled">
<input type="button" disabled value="This is disabled">
<input id="toggle" type="button" value="This one goes back and forth">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is one way you can add the styling:
<button class="btn-disabled" disabled> Test </button>
button:disabled.btn-disabled {
opacity: 0.5;
}
$("button").addClass( "btn-disabled" );

Toggle background color of checkbox div or label

I can get the follow code to work like I want it to with one exception.
When I select the checkbox the background color of the div changes from #fff to #ffe600 as it should. The problem I'm running into is when the form is submitted and page is refreshed the background color reverts back to #fff. I would like for the back ground color to stay #ffe600 when the page is refreshed after the form has been submitted. The checkbox remains checked after page refresh but the div background color reverts back to #fff. Does anyone know if it's possible to maintain the div background color #ffe600 when the page is refreshed. This has really gotten be stumped.
function myFunction(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#ffe600';
} else {
x.style.backgroundColor = '#fff';
}
}
#product1 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
<label class="chk">
<input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>
Thanks!
One option is to check on load with jquery and then highlight the currently checked boxes.
$('input[type=checkbox]').each(function(){
if($(this).is(':checked'))
$(this).parent().parent().css('backgroundColor','#ffe600');
else
$(this).parent().parent().css('backgroundColor','#fff');
});
function myFunction(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#ffe600';
} else {
x.style.backgroundColor = '#fff';
}
}
#product1 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
#product2 {
background-color: #fff;
padding: 3px 5px 3px 7px;
margin-top: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product1">
<label class="chk">
<input type="checkbox" onChange="myFunction(product1, this)" name="select_product" value="Y" />Label goes here.</label>
</div>
<div id="product2">
<label class="chk">
<input checked type="checkbox" onChange="myFunction(product2, this)" name="select_product2" value="V" />Label goes here 2.</label>
</div>
Is there a need to actually refresh the page? It looks like you're using AJAX.
Do you use a function to handle the submit of the form? Cause then you could do the following to prevent the page from reloading
<form onsubmit="submitFunction(event)">
// form elements
</form>
And the JavaScript part like the following
function submitFunction(event) {
event.preventDefault();
// form data processing
}
The event.preventDefault() will keep the page from reloading which should keep the background color of your element.
You can use localstorage or Cookie to store the state of checkbox and later when page loads you can get the state from them or else you can do the same check as in myFunction when page loads as below :
window.onload = function(){
var checkBoxEle = document.querySelector("div#product1 input[type='checkbox']");
var productEle = document.getElementById("product1");
if (checkBoxEle.checked) {
productEle.style.backgroundColor = '#ffe600';
} else {
productEle.style.backgroundColor = '#fff';
}
You can make a function using jquery that can be used for checkbox validation and formatting when the document is loaded and when the checkbox is clicked.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var setColor = function(){
if($("#select_product").is(":checked")) $("#product1").css("background-color", "#ffe600");
else $("#product1").css("background-color", "#fff");
}
$(document).ready(function(){
setColor();
$("#select_product").click(setColor);
});
</script>
<div id="product1">
<label class="chk">
<input type="checkbox" id="select_product" value="Y">Label goes here.</label>
</div>
</body>
</html>

Display a new image based on image choices

I'm trying to create a form in HTML using radio buttons for options. The radio buttons need to be individual clickable thumbnail images (so no browser style radio buttons will be seen, and each radio button is different). There will be 3 groups of radio buttons, each with 3 options.
These need to combine at the end to display a larger main image elsewhere on the page, based on the options the user selected.
I want the main image to change dynamically, as the user selects each option. - I don't want a form with a submit button at the end.
Does anyone have any ideas please?
The code I have so far is:
<style>
label {display:block;}
.radio {
opacity: 0.5;
width: 80px;
height: 80px;
float: left;
margin: 5px;
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[type=radio].radio-image').each(function() {
var id = this.id;
$(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
});
$('.newrad').live('click', function(e) {
e.preventDefault();
var $check = $(this).prev('input');
$('.newrad div').attr('class', 'radio');
$(this).find('div').addClass('checked');
$('input[type=radio].radio-image').attr('checked', false);
$check.attr('checked', true);
});
});
$(document).ready(function() {
$("input:radio[name=wardrobe]").change(function() {
if (this.value == "a") {
$("#imgOne").attr(
'src', 'a.jpg'
);
}
else {
$("#imgOne").attr(
'src', 'b.jpg'
);
}
});
});
</script>
</head>
<body>
<form>
<label><input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />A</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="double" value="b" />B</label>
<label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
</form>
<img id="imgOne" />
</body>
It's only a partial code, for the first set of options, I used it as a starting point.
I managed to get thumbnails as radio buttons, which work great. And I managed to get normal radio buttons to swap an image. But I can't get both working together.
So, I think you are on the right track. Although I am a little confused on the functionality of hiding the button and replacing it with an tag, I believe what you want is to make thumbnail images have the functionality of radio buttons. All you have to do is replace your current
<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />
with
<img src="a.jpg" class="radio-image" data-ref="a"/>
and change your jQuery to allow for these new images:
$(document).ready(function() {
$('img.radio-image').click(function() {
$("img.selected").removeClass("selected");
$(this).addClass("selected");
$("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg");
});
});
and the css
img{
border: 1px solid transparent;
}
.selected {
border: 1px solid #00c;
}
The trick is that your images just need to sit there. Let jQuery do the heavy lifting. I hope this helps.

Categories