So imagine I have 3 checkboxes, 1 'parent' checkboxes and 2 'child' checkboxes.
If the parent checkbox is checked, I want to be able to check either or both of the two child checkboxes.
If the parent checkbox is unchecked, I either of the two child checkboxes should not be checkable at all.
<div id="mycheckboxes">
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox1($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
</div>
currently everyone of of these checkboxes are checkable, to reiterate the above, I am trying to make it so if parentcheckbox is checked, the two children are selectable, and if parent is unchecked, the two children are uncheckable.
Inside component.ts file add these lines:
parentcheckbox1;
childcheckbox1;
childcheckbox2;
isParentChecked = true;
parentcheckbox(event) {
this.isParentChecked = !event;
}
and the HTML would look like this:
<div id="mycheckboxes">
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
</div>
I made few changes in the file. Like missing closing tag of span, parentcheckbox1 method renamed to parentcheckbox and added disabled in child checkboxes.
Here is the working stackblitz link: https://stackblitz.com/edit/angular-b5mpvv?file=src/app/app.component.html
Let me know if face any issue.
New Update based on comments:
parentcheckbox method:
parentcheckbox(event, child1, child2) {
this.isParentChecked = !event;
if (!event) {
child1.checked = false;
child2.checked = false;
}
}
HTML Changes:
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event, child1, child2)">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
#child1
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">
<input type="checkbox" class="custom-control-input" id="childcheckbox2"
#child2 name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">
In the parent change handler parentcheckbox1() set a property e.g. disableChildCheckboxes - to either true or false. Bind this to the disabled attribute of the child inputs using
<input [attr.disabled]="disableChildCheckboxes || null"
Also, use distinct names for the handler functions and ngModel i.e not the same name for both
For people using VanilaJS (Not Angular)
EDIT: I haven't used Angular so I didn't realize that there is a better way to do this. I will leave this answer up for those wanting a way to do this in VanillaJS.
I have tried three almost identical approaches here, all using javascript. For all of them you will need to add the disabled attribute to the children and add an onclick attribute to the parent with the appropriate function copied into the page. If you only have one of these on your page than I would probably go for approach 1 or 2 otherwise I would use approach 3.
This just runs a function which checks if the parent is checked when you click on it and disables/enables the children accordingly.
Add onclick="toggle_children()" to the parent checkbox.
This is similar to 1 but when you call the function you are also sending whether the box is checked of not so the if statement is not needed.
Add onclick="toggle_children1(this.checked)" to the parent checkbox.
This is best if you are using multiple of these groups on a page. On each parent add onclick="toggle_children2(this.checked, children_array)" where children_array is an array containing the id's of all the children connected to that parent.
// onclick="toggle_children()"
function toggle_children() {
if (document.getElementById('parentcheckbox').checked) {
document.getElementById('childcheckbox1').disabled = false;
document.getElementById('childcheckbox2').disabled = false;
} else {
document.getElementById('childcheckbox1').disabled = true;
document.getElementById('childcheckbox2').disabled = true;
}
}
// onclick="toggle_children1(this.checked)"
function toggle_children1(state) {
document.getElementById('childcheckbox1').disabled = !state;
document.getElementById('childcheckbox2').disabled = !state;
}
// onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])"
function toggle_children2(state, children) {
let i;
for (i = 0; i < children.length; i++) {
document.getElementById(children[i]).disabled = !state;
}
}
label {
display: block
}
<div id="mycheckboxes">
<label>
<input type="checkbox" id="parentcheckbox" onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])">Parent
</label>
<label>
<input type="checkbox" id="childcheckbox1" disabled>Child1
</label>
<label>
<input type="checkbox" id="childcheckbox2" disabled>Child2
</label>
</div>
Related
vI am working with HTML and have a form with a group of checkboxes:
-> What are your favorite colors?
---> Red
---> Green
---> Blue
Say I selected, Red AND Green. In the form post, I want it to look like: "favorite-color": ["red", "green"]. Now, it only shows one of the colors, even if I select multiple. Here is some sample code:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="red" name="color" value="red">
<label class="custom-control-label" for="red">Red</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="green" name="color" value="green">
<label class="custom-control-label" for="green">Green</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="blue" name="color" value="blue">
<label class="custom-control-label" for="blue">Blue</label>
</div>
My post, when I select red AND green:
{'color': 'green'}
By the way, I am using Django as my backend to parse the form POST.
Is there a way to do this? Thanks!
Via this blog:
For multiselects or inlines (one-to-many fields) that have multiple values, use .getlist():
So:
request.POST.getlist("color")
Give all the input type="checkbox" elements the same value for their name attribute and then the values from the checked checkboxes will be submitted as a single value for the one name. In most server-side environments, that means that if you request that form value, you'll get all the values with the single form field request.
I would like to change a boolean value inside the component file with a simple checkbox. If it is not checked it should remain false, otherwise it should be true.
Component:
export class UsersComponent {
public Personal: boolean = false;
}
HTML:
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal"/>
Personal
</label>
Since you have added 2 way binding in html [(ngModel)]="Personal", it should assign automatically
check via
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal"/>
{{Personal}}
</label>
You can use these to toggle the value of the Personal
HTML:
<label>
<input type="checkbox" [checked]="Personal" (change)="mPersonal = !Personal" /> Checked + Change
{{Personal}}
</label>
Correct For 2 way binding :
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal" />
{{Personal}}
</label>
The short story is that I need to use a toggle switch to determine which of my methods are gonna be called. So I'm guessing that you can get a Boolean, referring to whether the switch is on or off? but how do I get that?
So I've implemented a toggleswitch in html
<label class="switch">
<input type="checkbox" id="ToggleswitchId" >
<span class="slider round"></span>
</label>
I've seen somebody do something like this, with javascript.
var switchTrueFalse = document.getElementById('ToggleswitchId').checked
but all I get is "Property 'checked' does not exist on type HTMLElement"
checked is not a method. It is one of the <input> attributes which is a boolean.
So, document.getElementById('ToggleswitchId').checked returns true when it is checked
checked is a property of checkbox input which returns true or false.
function clickCheckbox() {
if (document.getElementById('ToggleswitchId').checked) {
console.log("check")
} else {
console.log("uncheck");
}
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onClick="clickCheckbox()" >call method
<span class="slider round"></span>
</label>
Since it is an input tag, try using HTMLInputElement instead of HTMLElement.
Try using this code instead, and see if it works:
document.getElementById("ToggleswitchId") as HTMLInputElement).checked
You need to call a JavaScript function on the check/uncheck of check box.
function test() {
var switchTrueFalse = document.getElementById('ToggleswitchId').checked;
console.log(switchTrueFalse);
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onclick="test()" >
<span class="slider round"></span>
</label>
I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.
these are the checkboxes:
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" v-model="list"
v-on:click='mini=!list'>
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" v-model="mini"
v-on:click='list=!mini'>
<span class="switch">
<p>mini</p>
</span>
</label>
and in data I declare
list: true,
mini: false,
It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false
Thank you for any help!
Due to different browser behavior, you can bind event using $nextTick like this to prevent inconsistency. Seems this is more readable and traceable than using watcher.
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" :value="list" #click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" :value="mini" #click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
<span class="switch">
<p>mini</p>
</span>
</label>
How can I prevent a user from selecting multiple checkboxes in HTML?
you should change it to radio button instead of check box!
<input type="radio" name="group1" id="item1" value="Milk">
<label for="item1">Milk</label>
<br/>
<input type="radio" name="group1" id="item2" value="Butter" checked>
<label for="item2">Butter</label>
<br/>
<input type="radio" name="group1" id="item3" value="Cheese">
<label for="item13">Cheese</label>
I had a use case where I needed use checkboxes--which, unlike radio buttons, allows a user to UNcheck... Here's an example of something I pieced together from another stackoverflow user:
<head>
<meta charset=utf-8 />
<title>and-or checkboxes</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox1" value="and" </label><span id="span_and">checkbox1</span><br>
<label for="checkbox2"> <input type="checkbox" id="checkbox2" name="checkbox2" value="or" </label><span id="span_or">checkbox2</span>
<script>
$(document).ready(function(){
$('#checkbox1').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox2").attr('checked', false);
} else {
$("#checkbox2").removeAttr('checked');
}
});
});
$(document).ready(function(){
$('#checkbox2').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
$("#checkbox1").attr('checked', false);
} else {
$("#checkbox1").removeAttr('checked');
}
});
});
</script>
</body>
With a little work, you can combine the either/or two scripts into a single script. You probably don't need this now but I wanted to post it because it was very useful to me.
If you want that only one checkbox get selected at a time then its better to use radiobutton instead.
If you mean that you don't want multiple checkboxes from a same "logical group" to be checked at one time, you should use radio buttons instead of checkboxes.
<form>
<input type="radio" name="aGroup" value="choice1" /> Choice #1<br />
<input type="radio" name="aGroup" value="choice2" /> Choice #2
</form>
By using this, only 1 option can be checked at one time
Use Radio, and they must have the same name="".