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>
Related
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>
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>
Does anyone know what is the proper CSS selector for selected (:checked) AngularUI's radio button? I tried "checked", "selected", "active", but none of this does the work. I need to find a similar selector as :checked for HTML radio button.
Every useful answer / JSFiddle is highly appreciated and evaluated.
Thank you.
If it's styling you're after then use ng-class bound to the ng-model:
<input type="checkbox" ng-model='stuff' ng-class='{class1: stuff, class2: !stuff}'>
and add css rules for classes class1 and class2
Since you are using angularjs,instead of using jquery selectors like :checked or :active,you can just use the angularjs functionalities to detect the active checkbox.
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-click="yourFunction()" ng-model="formData.favoriteColors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
cosider this as your checkboxes,now in your js (ie)your controller
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.yourFunction = function() {
/**function to call when a checkbox with model formdata.favourite colors.red is selected **/
};
});
Notice I have include functions for only one checkbox.You can do it for each of these check boxes
You might find this fiddle useful
http://jsfiddle.net/ShinyMetilda/C9V39/
Also this example in the documentation will be usefull
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
I have a label tag that I am trying to link to an input type checkbox tag. I have multiple labels and multiple checkbox inputs, and they all have the same id and the same name, but different values. Can someone instruct me as how to construct a label that links to a value rather than an id? So this:
<label for="8994"></label>
Would link to:
<input id="member_ids_" name="member_ids[]" type="checkbox" value="8994">
Or is this not possible?
The label's for attribute must match the ID of the <input> element it refers to. In your case it would be something like:
<label for="member_id_8994"></label>
<input id="member_id_8994" name="member_ids[]" type="checkbox" value="8994">
The 'for' for the form element must match with the ID of the same form element.
<label for="id_1"></label>
<input id="id_1" name="member_ids[1]" type="checkbox" value="8994">
<label for="id_2"></label>
<input id="id_2" name="member_ids[2]" type="checkbox" value="8994">
<label for="id_3"></label>
<input id="id_3" name="member_ids[3]" type="checkbox" value="8994">
<label for="id_3"></label>
<input id="id_3" name="member_ids[4]" type="checkbox" value="8994">
Your DOM elements must have different IDs.
Even if each ID is just set to whatever that value is... ...or whatever.
They can not have the same ID.
Once you've got that out of the way, setting for on a label becomes really simple.
I doubt if that is possible. Label's for are tied to the id attribute of inputs. One way to do achieve your objective maybe through javascript, knockout's declarative bindings for instance.
check it our here: http://knockoutjs.com/documentation/introduction.html
Something along this line:
<label data-bind="click: myInput"></label>
<input type="checkbox" id="hello">
<script type="text/javascript">
var myInput= {
//implement the function to bind the label to the input#hello here
}
};
</script>
http://knockoutjs.com/documentation/click-binding.html
A jQuery solution that probably doesn't work.
$(function() {
ModifyLabels({target: $('input')});
$('input').change(ModifyLabels);
});
function ModifyLabels(eventObject) {
var inputs = $(eventObject.target);
input.each(function(i, input) {
$('label').each(function(i, label) {
if ($(label).attr('for') == $(input).val()) {
$(input).attr('id', $(input).val());
}
});
});
}
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="".