i want to hide all content, i want them to show when checked
like show content when checkbox checked
hide when unchecked so that when i check others they show up too
here is my try but its not working
<style>
#myBike:not(:checked) +#bike {
display: block !important;
}
#myCar:not(:checked) +#car {
display: block !important;
}
</style>
<input type="checkbox" id="myBike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="myCar">
<label for="vehicle2"> I have a car</label><br>
<div class="row" id="bike">
Something for bike
</div>
<div class="row" id="car">
Something for car
</div>
Please check the code below.
#bike {
display: none;
}
#myBike:checked~#bike {
display: block;
}
#car {
display: none;
}
#myCar:checked~#car {
display: block;
}
<input type="checkbox" id="myBike" />
<label for="vehicle1">I have a bike</label>
<input type="checkbox" id="myCar" />
<label for="vehicle2">I have a car</label>
<div class="row" id="bike">Something for bike</div>
<div class="row" id="car">Something for car</div>
Expanation:
You have used a wrong syntax ~ vs +
By default all div are set as display:block. You should set display:none as its initial.
Related
I have a Vue app with a HTML Form with multiple sets of radio buttons.
I customized their appearance using the SO answer written here
However, when I click on any of the radio buttons, only the first set of radio buttons are affected, even when clicking a different set's radio button.
This is the html and css (JSFiddle link)
Any idea why this is happening?
Update: The problem was with the label tags - their for attribute was still set to the first set of radio buttons!
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
<div class="days_open_input">
<div class="radio_group" >
<input type="radio" name="days_open" id="one_day" :value="1" v-model="days_open" checked>
<label class="radio_label" for="am">1</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
</div>
<div class="radio_group">
<input type="radio" name="days_open" id="three_days" :value="3" v-model="days_open">
<label class="radio_label" for="pm">3</label>
</div>
</div>
<div class="tracks_limit_input">
<div class="radio_group">
<input type="radio" name="tracks_limit" id="eight_songs" value="8" v-model="tracks_limit" >
<label class="radio_label " for="am">8</label>
</div>
<div class="radio_group">
<input type="radio" name="tracks_limit" id="sixteen_songs" value="16" v-model="tracks_limit" checked class="tracks_limit_input__margin">
<label class="radio_label" for="pm">16</label>
</div>
</div>
/* completely hiding radio button */
input[type="radio"] {
display: none;
}
/* simulate radiobutton appearance using pseudoselector */
input[type="radio"] + *::before {
content: "";
/* create custom radiobutton appearance */
display: inline-block;
width: 15px;
height: 15px;
padding: 3px;
margin-right: 5px;
/* background-color only for content */
background-clip: content-box;
border: 1px solid #bbbbbb;
background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance of checked radiobutton */
input[type="radio"]:checked + label::before {
background-color: black;
}
/* resetting default box-sizing */
*,
*:before,
*:after {
box-sizing: border-box;
}
/* optional styles for centering radiobuttons */
.radio-group label {
display: inline-flex;
align-items: center;
}
I think there is no mistake with the css
The code you are using for the HTML is the one causes problem:
1st it is Vue code not pure HTML code
I will take the 1st group - the time example:
<div class="time_input" >
<div class="time_input__radio_group">
<div class="radio_group">
<input type="radio" name="start" id="am" :value="true" v-model="startInMorning">
<label class="radio_label" for="am">AM</label>
</div>
<div class="radio_group">
<input type="radio" name="start" id="pm" :value="false" v-model="startInMorning">
<label class="radio_label" for="pm">PM</label>
</div>
</div>
</div>
Both of inputs is set to the same model startInMorning so if it is true both checked and vice versa.
So the fix is:
first remove the v-model="startInMorning" for both
next change the :value
for the first one :value="startInMorning",
for the second one :value="!startInMorning"
Do similar for others
The problem seemed to be with the HTML!
The for attribute on the label tags was set to the wrong radio buttons
ie
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
<input type="radio" name="days_open" id="two_days" :value="2" v-model="days_open">
<label class="radio_label" for="pm">2</label>
I encountered a problem while doing the project.
why not run #MyId:checked~#show(style) for ID of a tag in <a> , <label> and <p>
is there a way to run css for it?
without removing and moving the label tag
, change the #test:checked~#show of this example to run properly.
#show {
display: none;
}
#test:checked~#show {
display: block;
}
<label>
<input id="test" type="radio" value="0">click to show
</label>
<div id="show">
hahahahahahha
</div>
Otherwise you can do that:
#show {
display: none;
}
#test:checked~#show {
display: block;
}
<input id="test" type="checkbox" >
<label for="test">click to show</label>
<div id="show">
hahahahahahha
</div>
I have a form containing 20 checkboxes.
I want to show the content of a div when a checkbox is checked.
I got a result like that
#toggle-content1 {
display: none;
}
#mycheckbox1:checked~#toggle-content1 {
display: block;
height: 100px;
}
#toggle-content2 {
display: none;
}
#mycheckbox2:checked~#toggle-content2 {
display: block;
height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div id="toggle-content1">
This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content2">
This content should appear when the checkbox is checked
</div>
But if you give it a try the code snippet, you'll notice that the first checkbox move the second one(when opened the div), is there a way to leave the checkbox in one row and display the divs on the others?
The css world is new to me, there is a way to write that code for 20 checkbox without write the css for every div?
You can try something like this:
.content {
display: none;
width: 100%;
}
/*Use + to target only one .content*/
input[type=checkbox]:checked + .content {
display: block;
height: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
}
input[type=checkbox] {
order: -1; /*make all the input on the top*/
}
<div class="container">
<input type="checkbox" name="mycheckbox" value="0">
<div class="content">
0)This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" value="1">
<div class="content">
1)This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" value="2">
<div class="content">
2)This content should appear when the checkbox is checked
</div>
<input type="checkbox" name="mycheckbox" value="3">
<div class="content">
3)This content should appear when the checkbox is checked
</div>
</div>
I simply reordered your tags, input first then divs. But i'm not really sure that's what you want
#toggle-content1 {
display: none;
}
#mycheckbox1:checked~#toggle-content1 {
display: block;
height: 100px;
}
#toggle-content2 {
display: none;
}
#mycheckbox2:checked~#toggle-content2 {
display: block;
height: 100px;
}
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div id="toggle-content1">
This content should appear when the checkbox1 is checked
</div>
<div id="toggle-content2">
This content should appear when the checkbox2 is checked
</div>
http://jsfiddle.net/ScnQT/5539/
please have a look below updated code, hope you will find the solutions.
.chkBox{
display:inline-block;
position:relative;
}
.chkTxt{
background:#fff;
padding:10px;
border:1px solid #ccc;
width:500px;
height:100px;
position:absolute;
top:100%;
left:0;
display:none;
}
.chkBox input[type="checkbox"]:checked + .chkTxt{
display:block;
}
<div class="chkBox">
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="0" />
<div class="chkTxt">This content should appear when the checkbox1 is checked </div>
</div>
<div class="chkBox">
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="0" />
<div class="chkTxt">This content should appear when the checkbox2 is checked </div>
</div>
<div class="chkBox">
<input type="checkbox" name="mycheckbox" id="mycheckbox3" value="0" />
<div class="chkTxt">This content should appear when the checkbox3 is checked </div>
</div>
<div class="chkBox">
<input type="checkbox" name="mycheckbox" id="mycheckbox4" value="0" />
<div class="chkTxt">This content should appear when the checkbox4 is checked </div>
</div>
<div class="chkBox">
<input type="checkbox" name="mycheckbox" id="mycheckbox5" value="0" />
<div class="chkTxt">This content should appear when the checkbox5 is checked </div>
</div>
I would use a script for this...and in a real application, I would use a model + templating engine.
(Vue engine sample)
This way you can put your output wherever you want and format however you like it. This way you can also load a new datamodel from the server(store your checkbox questions/values/answers in db somwhere) and it would redraw/update your entire page without needing any updates from you.
// HTML
<input type="checkbox" name="mycheckbox" id="mycheckbox1" value="1" />
<input type="checkbox" name="mycheckbox" id="mycheckbox2" value="2" />
<input type="checkbox" name="mycheckbox" id="mycheckbox3" value="3" />
<input type="checkbox" name="mycheckbox" id="mycheckbox4" value="4" />
<div id="activeCheckboxes"></div><!-- you can put this anywhere on the page -->
// JavaScript
const checkboxes = {
1: {checked: false, message: 'First checkbox checked'},
2: {checked: false, message: 'Second checkbox checked'},
3: {checked: false, message: 'Third checkbox checked'},
4: {checked: false, message: 'Fourth checkbox checked'}
};
const activeCheckboxes = document.getElementById('activeCheckboxes');
const updateCheckboxes = () => {
activeCheckboxes.innerHTML = '';
Object.keys(checkboxes).forEach((val) => {
let checkbox = checkboxes[val];
if (checkbox.checked) {
activeCheckboxes.innerHTML += '<div>'+checkbox.message+'</div><hr>';
}
});
};
$(document).ready(() => {
$('input[type]="checkbox"').click((evt) => {
checkboxes[evt.target.value].checked = evt.target.checked;
updateCheckboxes();
});
});
Sample Fiddle
I'm using the following mark up and styles (Bootstrap). It shows my checkbox but it is paralysed, that is, it cannot be checked. here is my mark up:
I want something more Bootstrap-ish. I know there are other options to make the checkbox look fancy but that do not solve the problem.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
</div>
</div>
Here is how it looks.
What exactly is the issue?
If I put the input element inside label I get this ugly thing:
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
The problem is with your label. The for attribute must match with the name attribute of your label
Looks need to tweak bootstrap styling for custom checkbox.
Check this
HTML
<div class="form-group">
<div class="checkbox">
<label for="check">
<input type="checkbox" id="check"/>
<span class="fake-input"></span>
<span class="fake-label">Option 2</span>
</label>
</div>
</div
CSS
.fake-input {
float: left;
width: 20px;
height: 20px;
border: 1px solid #9f9f9f;
background: #fff;
vertical-align: middle;
position: relative;
margin-right: 10px;
border-radius: 4px;
}
input[type="checkbox"] {
position: fixed;
top: -9999px;
left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
content:"\2713";
position: absolute;
color: #000;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Check in Fiddle
Reading around it looks like you have to style the checked version and the unchecked version.
input[type=checkbox]:checked {
}
Styling with this tag should solve your problems.
Use "for" attribute to solve this issue.
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label for="chk2" class="checkbox-label">Option 2</label>
</div>
</div>
<div class="col-md-3">
<input class="form-check-input" type="checkbox" id="" asp-for="">
<label class="form-check-label" for="" asp-for="">
</label>
</div>
It's not due to Bootstrap but to Wordpress. The checkboxes became visible after I added "display:block;" to the css of the checkbox input tag.
<input class="form-check-input" type="checkbox" id="">
input.form-check-input {
display:block;
}
Essentially I'm trying to float, most of the list item elements horizontally with with the input underneath the label. Here is a template of what I'm trying to achieve.
I've included some of the code here:
<div>
<label for="headline">Headline: </label>
<input type="text" name="headline" value="Milestone" maxlength="50"size="55">
<br>
<div class="dates clearfix">
<label for="effect_date">Date of Effect:</label>
<input type="text" name="effect_date">
<label for="end_date">End Date (opt):</label>
<input type="text" name="end_date">
<label>Date Visible:</label>
<input type="radio" name="is_date_visible" value="2012">
<label for="is_date_visible_yes">Yes</label>
<input type="radio" name="is_date_visible">
<label for="is_date_visible_no">No</label>
<br>
<label>Administrative:</label>
<input type="radio" name="is_adminis" value="1">
<label for="is_admin_yes">Yes</label>
<input type="radio" name="is_adminis">
<label for="is_admin_no">No</label>
</div>
</div>
And the CSS:
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
div.dates {
}
.dates label {
display: block;
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates label, .dates input {
float: left;
}
I've tried various things with the CSS all to no avail. Essentially I can't get the inputs to drop below the labels and I can't line them all up they usually come out staggered from the top.
I also have a fiddle link I've been working on:
http://jsfiddle.net/vjDEq/
Thanks for any help.
Here's something similar, without using floats:
http://jsfiddle.net/vjDEq/19/
HTML
<div>
<label for="headline">Headline: </label>
<input type="text" id="headline" name="headline" value="Milestone" maxlength="50"size="55">
</div>
<div class="dates">
<label for="effect_date">Date of Effect:
<input type="text" name="effect_date">
</label>
<label for="end_date">End Date (opt):
<input type="text" name="end_date">
</label>
<fieldset>
<legend>Date Visible:</legend>
<label for="is_date_visible_yes">
<input type="radio" name="is_date_visible" id="is_date_visible_yes" value="yes">
Yes
</label>
<label for="is_date_visible_no">
<input type="radio" name="is_date_visible" id="is_date_visible_no" value="no">
No
</label>
</fieldset>
<fieldset>
<legend>Administrative:</legend>
<label for="is_admin_yes">
<input type="radio" name="is_adminis" id="is_admin_yes" value="1">
Yes
</label>
<label for="is_admin_no">
<input type="radio" name="is_adminis" id="is_admin_no" value="0">
No
</label>
</fieldset>
</div>
CSS
#headline {
margin-bottom: 1em;
}
label {display: block;}
.dates label {
color: #2c93d5;
font-size: 15px;
margin-bottom: 5px;
}
.dates input {
display: block;
}
.dates fieldset input {
display: inline;
}
.dates label, .dates fieldset {
display: inline-block;
margin-right: 2em;
}
.dates fieldset label {
margin-right: 1em;
}
Instead of floats, the labels wrap the inputs and are set to inline-block. The radio buttons should be in a fieldset. Note that jsfiddle is adding normalize.css, which removes borders/margins/padding from the fieldset and legend. You have the option of floating the Administrative fieldset to the right if your layout demands it.