I have some HTML like this:
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
and a controller like this:
angular.module('simple-todos').controller('cboxCtrl', ['$scope',
function ($scope) {
console.log("starting");
$scope.hideChanged = function () {
console.log("in hideChanged() ");
};
}]); // end controller
It works fine and I see the message on the console when I click the checkbox. However, if I add a label around the checkbox:
<label>
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
Some text to explain the checkbox
</label>
The ng-change function does not run when I click the checkbox. I expect it has something to do with scoping but I cannot figure out what. If I replace labels with divs (which of course does not give a "nice" laýout), the ng-change function is again executed as expected.
I just created a jsfiddle with your code and it works for me.
https://jsfiddle.net/jfplataroti/hphb8c4v/5/
angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);
function cboxCtrl($scope) {
console.log("starting");
$scope.hideChanged = function() {
console.log("in hideChanged() ");
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
<label>
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
</label>
</div>
would you mind sharing your complete code?
clicking on label also triggers ng-change, you can click the label of a checkbox/radio to check/uncheck It should trigger the scoped function.
Please check for the browser you are trying to run this code. Also do check it on other browsers you have installed. AngularJS no longer supports IE8 or earlier.
link here: https://docs.angularjs.org/guide/ie
You need to move your ng-change on the checkbox to the surrounding label's ng-click
<label ng-click="hideChanged()">
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
Some text to explain the checkbox
</label>
Related
I'm trying to select a radio button using a variable but, although I can print the selected value the button does not stay selected.
This button is defined in an angular template as follows:
<a ng-click="selectNode($event, node)">
<input type="radio" name="library" style="float:left;" id="id-{{n}}" />
</a>
Where id is a GUID so is definitely unique.
Then, because it is the angular click event that is called when a button is selected I call this code in selectNode:
context.selectedNodes = [node];
$scope.selectedNode = node.$model.name;
var id = '#id-' + node.$model.id;
//console.log(typeof id);
//console.log(id);
$(id).prop("checked", true);
alert($("[name=library]:checked").val())
Which should theoretically check the radio button. However, it checks for a moment (it is checked when I call the alert) and then seems to disappear. I am however able to hardcode in an id and it stays checked.
I recommend diving more into the tools angular gives you to handle this things simply. If you need to track the value on this input, tie it to a model. If you want to process something once the checkbox has changed, use ng-change and tie it to a function.
<input type="radio" name="library" style="float:left;" ng-model=libraryModel ng-change="doSomething()" />
Keep in mind that doSomething() needs to be in scope, so in your controller, you need to define the function as $scope.doSomething(). Your model will also be attached to the $scope object, so you'd reference it as $scope.libraryModel. You can initialize the model as true or false as needed for a default value in the controller, then any user changes will auto update this value.
You're mixing jQuery and Angularjs, and it is not really worth. You can do the following just by using AngularJS ngModel, if you use AngularJs in your project.
Controller
function Controller($scope) {
//Init data input to value 1
$scope.data = ['1'];
}
HTML
<input type="radio" name="name" value="1" ng-model="data">
<input type="radio" name="name" value="2" ng-model="data">
Here, our $scope.data is set to 1 in our Controller, so it will match with the first input.
Hi I have coded a Grid view where we have one checkbox and two textbox. My need is that as we make any change in textbox like modify text from 0 to 1, the Checkbox should get automatically checked. This code is in asp.net and this can be done by javascript or Jquery.
Need code to do this activity.
Try this example
Html
<input type="text"/>
<input type="checkbox"/>
Script
$('input[type="text"]').keypress(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
Working demo
This will be Better answer of this question.. I initially debug by help of Manoj. Thanks again.
HTML
<input type="text" id="selector"/>
<input type="checkbox" id="myCheckbox"/>
SCRIPT
$('#selector').change(function () {
$('#myCheckbox').prop('checked', true); // Checks it
alert($('#selector').val());
});
I have a number of checkboxes. Each of them is associated with one input field. When the checkbox is checked, I would like to set the input field is editable, i.e. disabled attribute as false. Otherwise, the input field is readonly. Code for one pair of such checkbox and input field is like below (all these code is included in one section called competencies :
<label class="checkbox span3">
<input id="IT_OS_checkbox" type="checkbox" value="IT_OS" name="competency_checkbox[]">
IT - OS
</label>
<div class="controls">
<input id="IT_OS_input" class="input-xxlarge" type="text" name="competency_input[]" disabled="true" placeholder="mots clés séparés par virgule">
</div>
So I am trying to use Jquery's on method to fire the event for each checkbox. Code is as below :
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = event.target.parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
For simplicity, I just want to check the selector works fine, however, this code doesn't work. and in firebug, error message is TypeError: event.target.parent is not a function.
Can anyone help me figure this out ?
Try this:
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = $(event.target).parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
Just need to wrap the event.target to get the jQuery object.
I have a code (you can play it at http://learn.knockoutjs.com/#/?tutorial=intro , click Run in output window before playing ):
HTML:
<div class="btn" style="margin-left: 15px;" data-bind="click: includeMyNumber">
<input data-bind="checked: isIncludeMyNumber" data-val="true" id="IncludeMe" name="IncludeMe" style="margin: 0" type="checkbox" value="true" />
Include my number (+<span>11111111111</span>)
</div>
Javascript:
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.isIncludeMyNumber = ko.observable(false);
this.includeMyNumber = function(){
this.isIncludeMyNumber(!this.isIncludeMyNumber());
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
The problem is that checkbox click event handling does not work properly. When I click the space inside [div class="btn"...] ...[/div] area, checkbox behaviour is OK, but when I click the checkbox itself, it is not checked. How can I make it checkable in any case?
Thank you.
You´re use case is to make the checkbox checked when clicking the text?
I made a binding for this in my custom binding collection
https://github.com/AndersMalmgren/Knockout.Bindings
http://jsfiddle.net/5nqw4/
<input data-bind="checked: checked, label: { caption: 'Label with reference to input' }" type="checkbox" />
edit: You can also fix this by using the standard hack of wrapping the checkbox in a label element like http://jsfiddle.net/7dTfM/
I used code from the following:
Fancy checkboxes
The demo appears to work but it seems that it does not really change the status of the checkbox. Rather it just makes it looked checked or not checked.
Here's the HTML:
<fieldset class="checkboxes">
<label for="checkbox-01" class="label_check c_on"><input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01"> I agree to the terms & conditions.</label>
<label for="checkbox-02" class="label_check"><input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02"> Please send me regular updates.</label>
</fieldset>
Here's the javascript that is used:
<script type="text/javascript">
function setupLabel() {
if ($('.label_check input').length) {
$('.label_check').each(function () {
$(this).removeClass('c_on');
});
$('.label_check input:checked').each(function () {
$(this).parent('label').addClass('c_on');
});
};
};
var linkObj;
$(document).ready(function () {
$('.label_check, .label_radio').click(function () {
setupLabel();
});
setupLabel();
Can someone please confirm if there's a problem with the code. Seems to me that the author has missed making the code change the checkbox checked state.
Here's the code I use to check the status of the checkbox:
var action = $('#htmlEdit').is(":checked") ? "Editing HTML" : "Editing";
Am I doing the check wrongly or is the author's code just not changing the input element?
Not clear, but it works
http://jsfiddle.net/mplungjan/U4cLN/
When you click a label that uses
<label for="checkboxID" />, the box gets checked (and unchecked) in any browser without needing JavaScript. It is pure browser default behaviour
So
<LABEL class="label_check" for="checkbox-02"><INPUT name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox"> Please send me regular updates.</LABEL>
will check the box and the script styles the label