I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.
Related
I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link
I'm dealing with this case where I have a label tag wraps around the radio input button, something like:
<label>
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
The label tag is the one that gets formatted for view while the radio button is hidden. When ng-model == value, a certain radio button gets checked automatically and this is happening in my app, no problem at all.
The problem is, I want to format the label tag when this happens. Normally the label is formatted by an onclick event, but this is not an event so I'm not sure how I would solve this in JavaScript. CSS styling is not an option because it can't select parent element.
use ng-class
<label ng-class="{'class-name':question.value==option.value">
<input type="radio" ng-model="question.value" value="{{option.value}}">
</label>
in CSS
.class-name{
color:green;
}
I'm trying to add/remove a class and attribute to a few labels and input boxes depending on whether or not a checkbox is checked or not.
By default my check box is set up to be not checked. Here is my existing code...
$("#built").change(function()
{
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
}).change();
For some reason the event isn't firing. What am I doing wrong? Thanks!
Update:
Here is my html code
<label for="address1" class="readonly">Address Line 1</label>
<input type="text" name="address1" class="readonly" readonly="readonly" value="" />
Also, upon the check box being unchecked I would like the labels and inputs to revert back to its original state of having the readonly class and attribute respectively.
Remove the .change() after the function and add a ;.
eg:
$("#built").change(function(){
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});
There is no reason your code won't work, maybe just indentation or something like this.
Here is a jsfiddle with your function and it's working.
I just removed the line break like this:
$("#build").change(function() {
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});
Maybe there are other javascript problems somewhere else in the page?
the change function catch only if radio is checked but not when its unchecked. Why? Should it behave like that? When I click the radio button the other is unchanging so the event should fire, right? Below is the code and jsfiddle. Do I do anything wrong?
HTML:
Option1 <input type="radio" name="choice" id="op1" checked/>
Option2 <input type="radio" name="choice" id="op2"/>
<br><br>
<span id="sp1">Option1</span><br>
<span id="sp2" style="display: none;">Option2</span>
Javascript:
var op2 = $('#op2');
var sp1 = $('#sp1');
var sp2 = $('#sp2');
op2.change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});
You can run your event handler when either checkbox changes:
$('#op2, #op1').change(...
Here's a demo: http://jsfiddle.net/TCt82/
Another way to select this would be by element name since both checkboxes need to have the same name attribute. Selecting by ID will be faster (although you won't be able to see the difference).
UPADTE
If anyone knows the exact reason the change event does not fire on a checkbox after it's been de-selected, posting it as a comment or answer would be great.
Change your selector to get it using the name
$("input[name='choice']").change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});
Working sample http://jsbin.com/UPILuCe/1
I have an input field defined like this:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
</form>
I wrote up a mock jQuery script just to put the word "Yes" based on whether a checkbox has been checked. Look here:
$(document).ready(function () {
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("input[Title='language']").val("Yes");
}
});
});
However, it's not working and there are no errors in the console. I'm new to jQuery and am having a hard time understanding where exactly to put it, and how $(document).ready(function () { functions, so that may be the problem.
The non-working example can be seen here http://dreaminginswahili.com/admin/mapv4.html on the languages pane.
$('#checkbox') looks for an element with id="checkbox", like this
<input type="text" id="checkbox" />
but you don't have any in your html, so nothing happens.
If you have checkbox elements like <input type="checkbox" />, then you can select the checkboxes like this:
$(':checkbox')
and you can select the "checked" boxes like this:
$(':checkbox:checked')