I have a form in a javascript expandable list. In several of the headers I have checkboxes and radio buttons. I also have an expand all and collapse all button. My problem is, after clicking the collapse all button, if I click on a list item the checkbox doesn't show up. If I click on expand all button everything shows up normally, but then I have to click on the headers to collapse them down again. Here's a fiddle that reproduces the problem.
Edit to clarify: The problem only occurs after clicking on collapse all, and then clicking on the list header. The child headers no longer show the checkboxes.
HTML:
<body>
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
</body>
CSS:
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
}
#expList {
clear: both;
}
.listControl{
margin-bottom: 15px;
}
.listControl a {
border: 1px solid #555555;
color: #555555;
cursor: pointer;
height: 1.5em;
line-height: 1.5em;
margin-right: 5px;
padding: 4px 10px;
}
.listControl a:hover {
background-color:#555555;
color:#222222;
font-weight:normal;
}
Javascript:
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
//return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
Related
Hello Stackoverflow community, hope that you're doing well, what I'm trying to do is when I click the switch button I want it to hide certain inputs and show others, my code is a form to add students and teachers, since there are cummon inputs I tought about hide the uncummon one when I press the switch button and when I click it again do the opposite but all of that seem to be failed, I can only hide some and when I click it again it won't work, here what I did:
The Jquery code:
$(document).ready(function(){
$('.teacher').hide();
$('.switch').click(function(){
$('.student').hide();
$('.teacher').show();
});
});
The HTML code:
<label>Student </label>
<label class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</label>
<label> Teacher</label>
$('.teacher').hide();
$('.switch').click(function() {
$('.student').toggle();
$('.teacher').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='student'>Student</div>
<div class="switch">
<input type="checkbox" id="switchVal" value="0">
<span class="slider"></span>
</div>
<div class='teacher'>Teacher</div>
Use $(".teacher, .student").toggle();
Or, if needed, for more granular control you could always get the current checkbox state using
const isChecked = this.checked; // boolean`
Example:
jQuery($ => {
$(".teacher").hide();
$("#switchVal").on("input", function() {
$(".teacher, .student").toggle();
});
});
.toggler {
display: inline-flex;
gap: 0 5px;
cursor: pointer;
}
.toggler-checkbox {
display: inline-block;
width: 35px;
height: 15px;
background: #444;
border-radius: 1.2em;
}
.toggler-checkbox::before {
content: "";
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background: #0bf;
border-radius: 1em;
transition: transform 0.3s;
}
.toggler input:checked ~ .toggler-checkbox::before {
transform: translateX(20px);
}
.toggler-label {
user-select: none;
}
.toggler-label:nth-of-type(1) {
order: -1;
color: #0bf;
}
.toggler input:checked ~ .toggler-label:nth-of-type(1) {
color: inherit;
}
.toggler input:checked ~ .toggler-label:nth-of-type(2) {
color: #0bf;
}
<label class="toggler">
<input type="checkbox" id="switchVal" value="0" hidden>
<span class="toggler-checkbox"></span>
<b class="toggler-label">Student</b>
<b class="toggler-label">Teacher</b>
</label>
<ul>
<li class="student">Student: Anna</li>
<li class="student">Student: John</li>
<li class="teacher">Teacher: Mark</li>
<li class="student">Student: Tara</li>
<li class="teacher">Teacher: Zack</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Hello I'm trying to color the label of a radio button when it is checked
I don't understand why it only works for the first radio button: Mon
When I'm checking Mon, it gets red but when I check Tue, Mon goes black but Tue is black instead of red why is that?
<ul>
<li><input type="radio" id="day" name="day" value="Mon" onclick="myFunction()"></li>
<label id="daylab" for="day">Mon</label>
<li><input type="radio" id="day" name="day" value="Tue" onclick="myFunction()"></li>
<label id="daylab" for="day">Tue</label>
function myFunction() {
var checkBox = document.getElementById("day");
if (checkBox.checked == true){
document.getElementById("daylab").style.color = "red";
} else {
document.getElementById("daylab").style.color = "black";
}
}
</script>
Ids are uniques in HTML, so that markup is invalid and causes that your logic is not working properly.
Try to set a name rather than ids and work over it.
This is an alternative to set a specific color to the sibling label
Finds the closest parent ul and removes the class active.
Then, finds the closest li and adds the class active to the sibling label.
Array.prototype.forEach.call(document.querySelectorAll('[name="day"]'), function(elem) {
elem.addEventListener('change', myFunction);
});
function myFunction() {
Array.prototype.forEach.call(this.closest('ul').querySelectorAll('.active'), function(activeElem) {
activeElem.classList.remove('active');
});
this.closest('li').querySelector('label').classList.add('active');
}
.active {
color: lightgreen
}
<ul>
<li>
<label for="day">Mon</label>
<input type="radio" name="day" value="Mon">
</li>
<li>
<label for="day">Tue</label>
<input type="radio" name="day" value="Tue">
</li>
</ul>
You could use css to do that
input[type="radio"]:checked+label {
color: red;
}
HTML tidied up:
<ul>
<li><input type="radio" id="day" name="day" value="Mon">
<label id="daylab" for="day">Mon</label></li>
<li><input type="radio" id="day" name="day" value="Tue">
<label id="daylab" for="day">Tue</label></li>
</ul>
Running example
i use pure css for personalize input radio!
example:
input[type=radio]:checked
{
background: #F00;
}
but before use this code, normalize input radio with this code:
input[type=radio]
{
padding: 4px;
border: 1px solid #ccc;
background: #fff;
border-radius: 30px;
outline: none;
margin: 2px;
width: 14px;
height: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I need to uncheck checked radio buttons using jQuery. The buttons themselves are hidden so I am using clicks on the labels to trigger this. So far I have:
HTML
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
<label for="form1_areas2">West Midlands</label></div>
</form>
SCSS
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
&:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
}
JQUERY
$(document).ready(function(){
$("form input[type='radio']:checked + label").click(function(){
$(this).prev().prop( "checked", false );
});
});
Here a CodePen
But this isn't unchecking the radio button. I understand this is not standard functionality for radio buttons, but I need the user to be able to revert the set of radio buttons to their unselected state if desired, while also limiting them to selecting one from the set of options. Any help greatly appreciated.
Cheers
Mike
To enable/disable same radio , You have to use event.preventDefault() to prevent default behavior ( enabling check box when clicking on label, so checked prop will be always set to true ) and make radio enable / disable grammatically as shown in the below snippet :
$(document).ready(function(){
$("label").click(function(e){
e.preventDefault();
$check = $(this).prev();
if($check.prop('checked'))
$check.prop( "checked", false );
else
$check.prop( "checked", true );
//console.log($check.prop("checked"));
});
});
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
<label for="form1_areas2">West Midlands</label></div>
</form>
You could use next trick:
-Add a data-num attribute.
-Play with data-num on each click to check/uncheck the radio buttons.
Hope it helps:
$(document).ready(function(){
$("input").click(function(){
$("input").not(this).attr("data-num", 1);
var data = $(this).attr("data-num")
if(data==1){
data = 2
$(this).attr("data-num", data);
return;
}
if(data==2){
data = 1
$(this).prop('checked', false);
$(this).attr("data-num", data);
return;
}
})
})
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
}
input[type="radio"]:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london" data-num="1">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1">
<label for="form1_areas2">West Midlands</label></div>
</form>
I have a code using CSS sprite , as the code is working although i clicking on the image and the whole div contents change color include the contents word . But when i clicking on the contents word which stacked with images indeed the contents word does the changes of the color but the images still remain as the same without changing to blue.
Can we do it in Jquery method to make this function work ?
/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
display: none
}
/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
display: block;
width: 150px;
height: 100px;
}
/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
background-image: url("http://placehold.it/150x100/?text=Image2");
}
<div class="games-platform-item pt-item">
<ul class="games-sub-menu clearfix">
<li class="tab1 current">
<input type="radio" name="imgSwap" id="rdoImg1">
<label class="topimgG1" for="rdoImg1"></label>
<span>编辑精选</span>
</li>
<li class="tab2 current">
<input type="radio" name="imgSwap" id="rdoImg2">
<label class="topimgG2" for="rdoImg2"></label>
<span>编辑精选</span>
</li>
</ul>
</div>
Image of the div :
Change your html code that way, that the span which holds the text will be the child element of the label, that way, clik on the text will also be click on the label which will change the check state of the input, and your css will change too:
<div class="games-platform-item pt-item">
<ul class="games-sub-menu clearfix">
<li class="tab2 current">
<label class="topimgG2" for="rdoImg2">
<input type="radio" name="imgSwap" id="rdoImg2">
<span>编辑精选</span>
</label>
</li>
</ul>
</div>
Here is an example, I changed also your css a little bit:
.games-sub-menu input[type=radio] {
display: none
}
.games-sub-menu label {
display: block;
width: 150px;
height: 100px;
margin-bottom: 2em;
}
.games-sub-menu label.topimgG1 span::before {
display:block;
width: 100%;
content: "\00a0";
height: 100%;
background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu label.topimgG2 span::before {
display:block;
width: 100%;
content: "\00a0";
height: 100%;
background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu label.topimgG1 input[type=radio]:checked + span::before {
background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 input[type=radio]:checked + span::before {
background-image: url("http://placehold.it/150x100/?text=Image2");
}
<div class="games-platform-item pt-item">
<ul class="games-sub-menu clearfix">
<li class="tab1 current">
<label class="topimgG1" for="rdoImg1">
<input type="radio" name="imgSwap" id="rdoImg1">
<span>编辑精选</span>
</label>
</li>
<li class="tab2 current">
<label class="topimgG2" for="rdoImg2">
<input type="radio" name="imgSwap" id="rdoImg2">
<span>编辑精选</span>
</label>
</li>
</ul>
</div>
On click event just change the background image of that particular div whereever you are clicking.
By jQuery you can remove previous class and add another class which has different background property.
Example -
.games-sub-menu label.topimgG1Clicked {
background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=ImageChangedImage");
}
In javascript click event:
$(this).closest('label').removeClass('topimgG1');
$(this).closest('label').removeClass('topimgG1Clicked');
I'm trying to create a segmented control to help organize content on my website. So far, I've got the segmented control created and looking the way I want using HTML and CSS. Now, I would like to expand the functionality of this control to show / hide a series of div tags when each segment is selected. However, JavaScript is definitely not my forte, and I haven't been able to find a good, responsive solution to this problem.
Below is the code I've got so far. You'll also notice a series of div tags whose text indicates which tags should be shown when each segment in the control is selected. I'm pretty sure JavaScript would be the easiest solution to this problem, but as I said, I'm not familiar enough with that language to come up with a good solution here. Any help you can provide on expanding this segmented control so I can use it to show and hide different div tags based on the active segment that is selected would be greatly appreciated.
Here's the HTML I've got:
<ul class="segmented-control">
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked>
<label class="segmented-control__label" for="option-1">Step 1</label>
</li>
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
<label class="segmented-control__label" for="option-2">Step 2</label>
</li>
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="3" name="option" id="option-3" >
<label class="segmented-control__label" for="option-3">Step 3</label>
</li>
</ul>
Here's the various div tags that should be displayed when a segment within the control is selected. Obviously they are all displaying right under the segmented control right now, and nothing happens to any of these div tags when a new segment is selected. This is what the JavaScript would need to do :)
<div class="Step_1_Content" align="center">
<p>This is the content that should be displayed when the Step 1 segment has been selected</p>
</div>
<div class="Step_2_Content" align="center">
<p>This is the content that should be displayed when the Step 2 segment has been selected</p>
</div>
<div class="Step_3_Content" align="center">
<p>This is the content that should be displayed when the Step 3 segment has been selected</p>
</div>
And here's the CSS I'm using for the Segmented Control:
<style>
.segmented-control {
display: table;
width: 100%;
margin: 2em 0;
padding: 0;
}
.segmented-control__item {
display: table-cell;
margin: 0;
padding: 0;
list-style-type: none;
}
.segmented-control__input {
position: absolute;
visibility: hidden;
}
.segmented-control__label {
display: block;
margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
padding: 1em .25em;
border: 1px solid #E62033;
color: #E62033;
font: 14px/1.5 sans-serif;
text-align: center;
cursor: pointer;
}
.segmented-control__label:hover {
background: #ffffff;
color: #E62033;
}
.segmented-control__input:checked + .segmented-control__label {
background: #E62033;
color: #ffffff;
}
</style>
Once again, thanks in advance for your help!
You can simply store the state of the checkboxes in variables, and hide the divs based on those variables.
The first variables I included below are used on page load, the other ones when the object has changed.
Check it out here: https://jsfiddle.net/ezfy66f9/
var checked1 = $('#option-1').is(':checked');
var checked2 = $('#option-2').is(':checked');
var checked3 = $('#option-3').is(':checked');
if (checked1 == 1) {
$('.Step_1_Content').show();
$('.Step_2_Content').hide();
$('.Step_3_Content').hide();
} else if (checked2 == 1) {
$('.Step_2_Content').show();
$('.Step_1_Content').hide();
$('.Step_3_Content').hide();
} else if (checked3 == 1) {
$('.Step_3_Content').show();
$('.Step_1_Content').hide();
$('.Step_2_Content').hide();
}
$(".segmented-control").change(function () {
var checked1 = $('#option-1').is(':checked');
var checked2 = $('#option-2').is(':checked');
var checked3 = $('#option-3').is(':checked');
if (checked1 == 1) {
$('.Step_1_Content').show();
$('.Step_2_Content').hide();
$('.Step_3_Content').hide();
} else if (checked2 == 1) {
$('.Step_2_Content').show();
$('.Step_1_Content').hide();
$('.Step_3_Content').hide();
} else if (checked3 == 1) {
$('.Step_3_Content').show();
$('.Step_1_Content').hide();
$('.Step_2_Content').hide();
}
});
here the code:
$( document ).ready(function() {
// load initial state
hideContent();
$(".step1").show();
// click on li-element
$( "li" ).on( "click", function() {
var li = $(this);
// find the content number
var number = li.find("input").attr("value");
hideContent();
showContent(number) ;
});
});
function hideContent() {
$(".content").hide();
}
function showContent(number) {
$(".content.step"+number).show();
}
.segmented-control {
display: table;
width: 100%;
margin: 2em 0;
padding: 0;
}
.segmented-control__item {
display: table-cell;
margin: 0;
padding: 0;
list-style-type: none;
}
.segmented-control__input {
position: absolute;
visibility: hidden;
}
.segmented-control__label {
display: block;
margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
padding: 1em .25em;
border: 1px solid #E62033;
color: #E62033;
font: 14px/1.5 sans-serif;
text-align: center;
cursor: pointer;
}
.segmented-control__label:hover {
background: #ffffff;
color: #E62033;
}
.segmented-control__input:checked + .segmented-control__label {
background: #E62033;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="segmented-control">
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked="checked">
<label class="segmented-control__label" for="option-1">Step 1</label>
</li>
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
<label class="segmented-control__label" for="option-2">Step 2</label>
</li>
<li class="segmented-control__item">
<input class="segmented-control__input" type="radio" value="3" name="option" id="option-3" >
<label class="segmented-control__label" for="option-3">Step 3</label>
</li>
</ul>
<div class="step1 content" align="center">
<p>This is the content that should be displayed when the Step 1 segment has been selected</p>
</div>
<div class="content step2" align="center">
<p>This is the content that should be displayed when the Step 2 segment has been selected</p>
</div>
<div class="content step3" align="center">
<p>This is the content that should be displayed when the Step 3 segment has been selected</p>
</div>
Look this jsfiddle, it's html+css only solution. But this one requires a placement of your div's with content inside of appropriate segment control li elements, like this:
<li class="segmented-control__item">
<input id="option-1" ...>
<label class="segmented-..." for="option-1">Step 1</label>
<div class="Step_1...">
<p>some content...</p>
</div>
</li>
and also some additional css.