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.
Related
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>
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");
}
});
What is the simplest way to change the image selected (class=selected) when a form element is selected? I've tried several different methods (unsuccessfully) but my Javascript is a bit rusty so I could use some help.
I am displaying an image next to each set of radio buttons which depicts the value when hovered or selected. In addition, I've pre-selected a default value to be displayed initially (usually the most popular answer). The css ensures that the relevant images are displayed in a fixed position, and the z-index and opacity change in order to display the correct image. The only problem is that when the user clicks on a radio button it on, the value is correctly set to selected but the corresponding image is not being selected.
I have included the relevant snippets below and posted a fiddle with the full css here.
<style type="text/css">
.new li img {
opacity: 0;}
.new li.selected img {
z-index: 2;
opacity: 1;}
.new:hover li.selected img {
z-index: 0;}
.new li:hover img {
z-index: 2;
opacity: 1;}
</style>
<div class="new alternate_image">
<ul>
<li>
<img src="sports.png" />
<label><input type="radio" name="item1" value="Sports"/>Sports</label>
</li>
<li>
<img src="fashion.png" />
<label><input type="radio" name="item1" value="Fashion"/>Fashion</label>
</li>
<li class="selected">
<img src="city.png" />
<label><input type="radio" name="item1" value="City"/>City</label>
</li>
</ul>
</div>
The following will do the job. Though since it will affect all radio buttons, you may want to tweak the first selector (e.g. '.alternate_image input[type=radio]').
$('input[type=radio]').change(function() {
var name = this.name;
var self = this;
$('input[name=' + name + ']').each(function() {
$(this).closest('li').toggleClass('selected', this === self);
});
});
http://jsfiddle.net/nonplus/qF3P9/1/
I have check boxes which I have images set for the labels, and I'm using code which applies an effect when hovered over. However when tested in a fiddle the hover effect stays when selected and doesn't show the actual check tick box, only issue with the fiddle is that this only works on the last checked not all checked.
However when I apply this to my site only the hover effect works, the effect doesn't stay on any selected and the tick boxes stay visible.
The fiddle: http://jsfiddle.net/Zgh24/1169/
The only differences between that in my code is that the DIV it is in also has classes, I'm using bootstrap.
HTML:
<div id="sites" class="navbar navbar-inverse" style="padding:5px">
<input type="checkbox" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="checkbox" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="checkbox" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>
CSS:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#sites label {
display: inline-block;
cursor: pointer;
}
#sites label:hover {
background-color: #ccc;
}
#sites label img {
padding: 3px;
}
JS:
<script>
$('#sites input:checkbox').addClass('input_hidden');
$('#sites label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
So my issue is sort of 2, I have a Fiddle which sort of does what I want, and then the fiddle I do have doesn't full work when I implement it.
I'm assuming I possibly have some css which is conflicting with that I'm trying to do, but I don't see how or what.
Any help is very appreciated -Tom
You could use only CSS pseudo class :checked and targeting next sibling label:
input[type=checkbox]:checked + label img
Finally, you should use as CSS rules:
#sites label:hover img,
#sites input[type=checkbox]:checked + label img {
background-color: #ccc;
}
DEMO jsFiddle
FYI, you could wish in some case to use instead of checkboxes radio buttons as in this jsFiddle:
http://jsfiddle.net/Zgh24/1173/
That could let you use persistant style on some element using only CSS with radio buttons hiddden:
http://jsfiddle.net/Zgh24/1174/
May be not sure.. the class .selected is used by bootstrap core and that style is applied to your label element.
Use your browser to see what style is applied.
I have a page developed using C# MVC3. It's a multiple employees report. The generated page will have a check box for each record/employee. The idea is to let the user check the box next to each record they want to print. When they click the Print button, which is on the page, only those selected records will be printed. How can I accomplish this?
Use Javascript to add/remove a class which will hide the content during print. Here is an example on jsFiddle.
Edit: For maximum support, include a separate stylesheet instead of using the media query.
<link rel="stylesheet" media="print" href="/print.css" type="text/css" />
HTML
<input type="checkbox" value="a" name="a"/> A |
<input type="checkbox" value="b" name="b"/> B |
<input type="checkbox" value="c" name="c"/> C
<div id="a" class="no-print">Content A</div>
<div id="b" class="no-print">Content B</div>
<div id="c" class="no-print">Content C</div>
CSS
#media print {
.no-print { display: none; }
}
/* For Styles */
div {
background: #CCC;
padding: 5px;
margin: 5px;
}
.no-print {
opacity: 0.5;
}
jQuery
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
$("#"+ $(this).attr('value')).removeClass('no-print');
} else {
$("#"+ $(this).attr('value')).addClass('no-print');
}
});