Show and hide html elements depending on radio selection - html

Yes, there are many posts that are kind of similar but not like mine I guess. After struggling for a while I'm not able to come up with a solution. I need help!
I have 4 different criteria:
Resident/Single, Resident/Family, Non-Resident/Single, Non-Resident/Family
For example: if Resident and Single are checked then show that div. The rest goes the same way.
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div style="display: none;">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>
This is as far as I was able to go.
$(document).ready(function() {
$('input').change(function() {
if ($('input[value="Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Single"]').is(':checked')) {
$('div').show();
} else if ($('input[value="Non-Resident"]').is(':checked') && $('input[value="Family"]').is(':checked')) {
$('div').show();
} else {
$('div').hide();
}
});
});
This is my repl: https://repl.it/#labanino/Show-based-on-selection#script.js

Instead of using ifs statement to show/hide divs you can simply get the checked values of radio button then just loop through your divs and compare if the .text() is equal to radio values show that divs only .
Demo Code :
$(document).ready(function() {
$(".category div:eq(0)").show() //show 1st div
$('input').change(function() {
//get radio values
var value = $("input[name='resident']:checked").val();
var value1 = $("input[name='single']:checked").val();
console.log(value + "/" + value1)
$(".category div").hide(); //hide all divs
var divss = value + "/" + value1;
//loop through divs
$(".category div").each(function() {
if ($(this).text() === divss) {
$(this).show() //show that div
}
})
});
})
.category > div {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<ol id="membership">
<li>
<input type="radio" name="resident" value="Resident" checked="checked" /> Resident
<input type="radio" name="resident" value="Non-Resident" /> Non-Resident
</li>
<li>
<input type="radio" name="single" value="Single" checked="checked" /> Single
<input type="radio" name="single" value="Family" /> Family
</li>
</ol>
<div class="category">
<div>Resident/Single</div>
<div>Resident/Family</div>
<div>Non-Resident/Single</div>
<div>Non-Resident/Family</div>
</div>
</fieldset>

Try selecting the divs by name or value and show them while hiding the others.
Check this repl -
https://repl.it/#DavidThomas12/Show-based-on-selection
I believe it fits your use case.

Related

Input radio bottom width jquery and hiide show div

I am trying to use jquery following the documentation but don't work pkease help me
I would that when I click on a specific radio value it display the div relationated
<script>
$(document).ready(function(){
$('input:radio[name=settore]:checked').change(function() {
if($("input[name='settore']").val() == '1');
$("div#pos-animatore").show();
if($("input[name='settore']").val() == '2');
$("div#post-risto").show();
});
});
</script>
<body>
<div>
<input type="radio" name="settore" value="!"><label for"animazione"> Animazione</label>
<input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label>
<input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2 </div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>
</body>
There are a few errors in your code, I'm afraid.
Some incorrect jQuery selectors (notably :checked), a mistyped value (! instead of 1) and a misspelt ID attribute.
Your working code (with comments) is:
//When the DOM document is ready... execute the following...
$(document).ready(function(){
// Select all INPUT elements with name="settore" and bind to the change event
$('input[name=settore]').change(function() {
// Hide all the divs initially, as I'm assuming you only want to display the one relevant one
$("div#pos-animatore,div#pos-risto,div#pos-hotel").hide();
// If the value of the CHANGED (this) element is 1... etc
if($(this).val() == '1'){
$("div#pos-animatore").show();
} else if($(this).val() == '2'){
$("div#pos-risto").show();
} else if($(this).val() == '3'){
$("div#pos-hotel").show();
}
});
});
<div>
<input type="radio" name="settore" value="1" id="animazione"><label for="animazione"> Animazione</label>
<input type="radio" name="settore" value="2" id="lavoro-an1"><label for="lavoro-an1">Ristorante</label>
<input type="radio" name="settore" value="3" id="lavoro-an2"><label for="lavoro-an2">Hotel</label>
</div>
<p></p>
<div id="pos-animatore" style="display: none;">
contenuto
</div>
<div id="pos-risto" style="display: none;">
contenuto2
</div>
<div id="pos-hotel" style="display: none;">
contenuto3
</div>

Check a radio button by default with jQuery

in an html page that I use to display text snippets, I use jQuery to filter those that contain just text, text including some url links or both :
JS code :
$(document).ready(function() {
$('input[type=radio]').attr('checked', false);
$(".selection").on("change", ":radio", function() {
var checkedVal = parseInt($(this).filter(":checked").val(), 10);
$(".container").hide().filter(function() {
if (checkedVal === 2) {
return $(this).find('a[href]').length && $(this)
} else if (checkedVal === 1) {
return $(this).find('a[href]').length <= 0 && $(this)
} else {
return $(this)
}
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selection">
</button> Display : <input type="radio" name="check" value="1" /> Texts only | <input type="radio" name="check" value="2" /> Texts w/ links | <input type="radio" name="check" value="-1" checked="checked" /> Texts + Texts w/ links</div>
I would like the "Texts + Texts w/ links" button to be checked by default and this choice to be kept when the page is refreshed.
I don't know how to do this. Any help would be greatly appreciated, thank you.
Instead of unchecking all the buttons, check the one you want to be the default.
$(document).ready(function() {
$('.selection :radio[value=-1]').attr('checked', true);
$(".selection").on("change", ":radio", function() {
var checkedVal = parseInt($(".selection :radio:checked").val(), 10);
$(".container").hide().filter(function() {
if (checkedVal === 2) {
return $(this).find('a[href]').length && $(this)
} else if (checkedVal === 1) {
return $(this).find('a[href]').length <= 0 && $(this)
} else {
return $(this)
}
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selection">
</button> Display : <input type="radio" name="check" value="1" /> Texts only | <input type="radio" name="check" value="2" /> Texts w/ links | <input type="radio" name="check" value="-1" checked="checked" /> Texts + Texts w/ links</div>

Abnormal behaviour of radio button when click

I have created a radio button in parent and child relationship. Like main is parent and sub is its child.
When I checked the parent div radio button, and after that trying to checked the its child div radio button, then parent div radio button automatically unchecked. I don't know how ?
Here is the code .
import React from 'react';
class Body extends React.Component {
constructor(props) {
super(props);
this.state = {
length :1,
arr:[{
subLen:2
},{
subLen:0
},{
subLen:1
}]
}
this.addMain = this.addMain.bind(this);
this.addSub = this.addSub.bind(this);
}
addMain(event) {
let temp = this.state.arr;
temp.push({subLen:0});
this.setState({arr:temp});
}
addSub(event,i){
console.log("add sub click ",i);
let temp = this.state.arr;
temp[i].subLen=temp[i].subLen+1;
this.setState({arr:temp},()=>{
console.log(this.state.arr);
});
}
render() {
return (
<div>
{
this.state.arr.map((e1,i1)=>{
return <div>
<h1>Main part</h1>
<input type="text" name={`${i1}name`}
placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i1}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i1}gender`} value="Female"/>
{e1.subLen> 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen).fill().map((e2,i2)=>{
return <div>
<input type="text" name=
{`${i2}name`} placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i2}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i2}gender`} value="Female"/>
</div>
})
}
<button onClick=
{(event)=>this.addSub(event,i1)}>Add Sub</button>
</div>
})
}
<button onClick={this.addMain}>Add More</button>
<button onClick=
{()=>console.log(this.state.arr)}>Show</button>
</div>
)
}
}
export default Body;
As you see in the image that while clicking the sub part radio buttons main part radio button unchecked automatically
I don't know why this is happening ?
Issue
Because you are using an array index as part of the radio input name and with the same suffix (i.e. "gender") they become part of the same radio button group.
Solution
Use more specific names to disambiguate the main inputs from the sub inputs.
I suggest "main-${index}-name" and "main-${index}-gender" for the main inputs, and "sub-${index}-name" and "sub-${index}-gender" for the sub inputs.
{this.state.arr.map((e1, i1) => {
return (
<div>
<h1>Main part</h1>
<input type="text" name={`main-${i1}-name`} placeholder="Enter name" />
<br />
Male:
<input type="radio" name={`main-${i1}-gender`} value="Male" />
Female:
<input type="radio" name={`main-${i1}-gender`} value="Female" />
{e1.subLen > 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen)
.fill()
.map((e2, i2) => {
return (
<div>
<input
type="text"
name={`sub-${i2}-name`}
placeholder="Enter name"
/>
<br />
Male:
<input type="radio" name={`sub-${i2}-gender`} value="Male" />
Female:
<input type="radio" name={`sub-${i2}-gender`} value="Female" />
</div>
);
})}
<button onClick={(event) => this.addSub(event, i1)}>Add Sub</button>
</div>
);
})}

Get all values for elements in a div

I have a for loop in and it generation id for div
i need to get all values for elements in a div when click any element at div
<div id="{{ item3.id }}" (click)="getChildren($event)">
<input type="checkbox" name="status" [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" [checked]="item3.templatesFields.inMain" />
</div>
and this ts code
public getChildren(e) {
}
Try This
getChildren(e)
{
if (e.target.children.length!=0) {
var g=Array.from(e.target.children).forEach(y=>console.log(y.value))
console.log(g);//here your values
}
<div id="{{ item3.id }}" (click)="getChildren(ch1, ch2)">
<input type="checkbox" name="status" #ch1 [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" #ch2 [checked]="item3.templatesFields.inMain" />
</div>
via TS you will see the nativeElement of both your checkboxes
getChildren(ch1: any, ch2: any){
console.log(ch1);
console.log(ch2);
}

Treeview with Checkboxes simple html with Css

I am looking for a treeview format for my ipfire backup system.
where the users need to select the folders for update. like in the image-->
Exemple
the server script is CGI Perl but i can implement simple HTML and CSS or very simple JS.
I need the parent folders if checked to check automaticly the content
I don't know your HTML but if it fits this
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>
and if you use the jQuery library you could do it like that
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
$(document).ready(function() {
$('.tree input[type="checkbox"]').on('change', function() {
checkParent($(this));
});
function checkParent(element) {
if (element.prop('checked')) {
var parent = element.parent().parent().find('> input[type="checkbox"]');
if (parent.length) {
parent.prop('checked', true);
checkParent(parent);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>