In my code, when a checkbox is selected an image is displayed. But when i select another checkbox the first image does not disappear and another image comes out.
What i really want is if i select a checkbox the first time and an image is displayed, I want it to disappear when i select a different checkbox so that the image of that checkbox can take its place. Any insights will be appreciated. Here is my code:
<body>
<input type="checkbox" />
<img src="pics/35.jfif" >
<input type="checkbox" />
<img src="pics/38.jfif" >
</body>
<style>
img {
display: none
}
input {
height: 30px;
width: 30px;
}
input:checked +img {
display: block
}
`
You need to use radio instead of checkbox like:
img {
display: none
}
input {
height: 30px;
width: 30px;
}
input:checked+img {
display: block
}
<fieldset>
<input type="radio" name="image" />
<img src="https://via.placeholder.com/150">
<input type="radio" name="image" />
<img src="https://via.placeholder.com/300">
</fieldset>
Reference:
radio
if you can add input id and add img class you can work. Simple version use it.
<input type="checkbox" id="inpt_1"/>
<img src="pics/35.jfif" class="img_1">
<input type="checkbox" id="inpt_2"/>
<img src="pics/38.jfif" class="img_2">
img {
display: none;
}
#inpt_1:checked + .img_1{
display: block;
}
#inpt_2:checked + .img_2{
display: block;
}
Related
Having an input form:
.upload-image input {
height: 100% !important;
width: 100% !important;
}
.upload-image-container {
background-color: #f5f7fa;
height: 192px;
width: 320px;
}
.upload-logo-label {
font-family: Open Sans;
top: 0;
color: #afafaf;
z-index: 1;
}
<div className="upload-image upload-image-container">
<label
htmlFor="files"
className="upload-logo-label btn"
id="image-input">
Drag & drop logo here
<input
name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
className="imgInp"
/>
</label>
</div>
The problem is that the div creates first the label on top and under it the input. What I want is to place the label (or not mandatory that label but anything that can contain text) in the middle of input.
This is how it looks now:
This is how I want to make it look (ignore the icon for the moment):
Also, only the input is clickable at the moment, the label text isn't and it should be.
Is there a way to do this?
I actually didnt try it, but something very similar worked, when I made custom checkboxes for one customer. I would go for something like this...
<input name="image"
id="image-input"
accept="image/*"
onChange={console.log('upload image')}
multiple
type="file"
class="imgInp"
style="display:none" />
<div id="img-div" class="upload-image upload-image-container">
<label htmlFor="files"
class="upload-logo-label btn"
id="image-input">
Drag & drop logo here
</label>
</div>
<script type="text/javascript">
$("#img-div").on("drop", function (event) {
$("#image-input").trigger("drop", event);
});
$("#img-div").on("click", function (event) {
$("#image-input").trigger("click", event);
});
</script>
I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>
I have a form on my site, which has a dropdown box set to display:none; in CSS. I am trying to reveal the dropdown (display: inline;) when a checkbox of another element is checked. What would be possible solution here?
When, #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should be set to CSS as display: inline;
Here is the HTML:
Codepen: http://codepen.io/mizan/pen/yNbqRa
<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
<label>
<input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
<input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
<div id="sc_cf_checkbox_error_1">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
</div>
</div>
<div class="sc-form-group">
<select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
<option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
<option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
<option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
</select>
<ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
<input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
<div id="sc_cf_checkbox_error_2">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
</div>
</div>
<div class="sc-form-group">
<label>
<input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
<input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
<div id="sc_cf_checkbox_error_3">
<ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
</div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>
I had to clean up your code quite a bit. There were a number of things wrong:
jQuery isn't loaded in your CodePen project
#choose_a_specific_project_from_dropdown was misspelled
You were not instantiating $(document).ready() correctly
You were attempting to listen for .changed() which doesn't exist
Now we're listening for .click() event
You were not showing/hiding the dropdown correctly. You were using .next() but that isn't necessary since you are referencing it by an ID selector.
Working CodePen project: http://codepen.io/anon/pen/bdWxVE
JavaScript code:
$(document).ready(function() {
$('#Give_to_a_specific_Project').click(function( event ){
if ($(this).is(':checked')) {
$('#choose_a_specific_project_from_dropdown').show();
}
else {
$('#choose_a_specific_project_from_dropdown').hide();
}
});
});
Use the onchange event of the checkbox. onchange check if the box is checked and if it is then show the select box.
If I have understood your question correctly, you can achieve this with CSS alone, with no JavaScript or jQuery. Here's a demo. Click on the [+] button to reveal the text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Toggle Visibility</title>
<style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}
/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}
/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
</style>
</head>
<body>
<input type="checkbox" id="hide">
<label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>
I am looking to have a checkbox (Football) that when
Unchecked:
displays one DIV (FootballChoice) containing a label image for the checkbox that changes with mouseover
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV (FootballChecked) that contains an alternate label image
shows another hidden DIV (FootballTeams).
When unchecked again, this needs to return to it's original state.
Alternatively if anyone knows how to change the label image when checked to the same as the one specified in the mouseover element here, that would also be a usefull altetrnative?
Thank you in advance.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="FootballTeams"){
$(".FootballTeams").toggle();
$(".FootballChecked").toggle();
$(".FootballChoice").toggle();
}
});
});
</script>
.FootballChecked {
display: none;
}
.FootballChoice {
display: show;
}
.sport {
display: none;
border: 1px dashed #FF3333;
margin: 10px;
padding: 10px;
background: #003366;
}
<input id="Football" type="checkbox" value="FootballTeams">
<div class="FootballChoice">
<label for="Football" class="FootballChoice">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png" onmouseover="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png';" onmouseout="this.src='http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_100x130.png';" alt="Football" title="Football">
</label>
</div>
<div class="FootballChecked">
<label for="Football">
<img src="http://web.static.nowtv.com/email-marketing/assets/structure/SPORTSPREF_FOOTBALL_NAME_100x130.png" alt="Football" title="Football">
</label>
</div>
<div class="sport FootballTeams">
Football Teams here
</div>
Do you have to use JavaScript? You could use the CSS Pseudo-selector :checked and the General Siblings Selector to display elements based on whether the checkbox is :checked or not.
E.G:
#football {opacity:0.2;}
.checked {display:none;}
#football:checked ~ .unchecked {display:none;}
#football:checked ~ .checked {display:block;}
label {
display:inline-block;
border:1px solid blue;
padding:20px;
background:url(http://lorempixel.com/100/100/sports)
}
label:hover {
border-color:red;
background:url(http://lorempixel.com/100/100/cats)
}
div {border:1px dotted green;}
<input id="football" type="checkbox" value="1" />
<div class="unchecked">
Unchecked:
displays one DIV
<div id="FootballChoice">
(FootballChoice) containing a
<label for="football">label image for the checkbox that changes with mouseover</label>
</div>
</div>
<div class="checked">
Checked:
hides the DIV (FootballChoice)
shows a hidden DIV
<div id="FootballChecked">
(FootballChecked) that contains an
<label for="football">alternate label image</label>
</div>
shows another hidden DIV .
<div id="FootballTeams">
(FootballTeams)
</div>
When unchecked again, this needs to return to it's original state.
</div>
http://jsfiddle.net/zpz3mvuv/
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');
}
});