I have some checkbox, and a button. Now, I want active button when one or more checkbox is checked. How can I do this in angularjs?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<label><input type="checkbox" name="check"> First</label>
<label><input type="checkbox" name="check"> Second</label>
<label><input type="checkbox" name="check"> Third</label>
<br>
<button type="button" disabled ng-model="$scope.btn">active/deactive</button>
Set ng-model to checkboxes
<label><input type="checkbox" name="check" ng-model="check1"> First</label>
<label><input type="checkbox" name="check" ng-model="check2"> Second</label>
<label><input type="checkbox" name="check" ng-model="check3"> Third</label>
And use ng-disabled to disable\enable button
<button type="button" ng-disabled="!check1 && !check2 && !check3" ng-model="$scope.btn">active/deactive</button>
You can use the ng-disabled directive on the button to add the disable attribute conditionally.
Check the below example where the input check boxes are bound to their respective properties on the controller's scope using the ng-model directive that serves two-way data binding in AngularJS.
Note: If you're having a complex condition to be checked in the view you can write a function and invoke it in the view using a corresponding directive in that situation.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.disableButton = disableButton;
function disableButton() {
if (vm.first || vm.second || vm.third) {
return false;
} else {
return true;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<label><input type="checkbox" name="check" ng-model="ctrl.first"> First</label>
<label><input type="checkbox" name="check" ng-model="ctrl.second"> Second</label>
<label><input type="checkbox" name="check" ng-model="ctrl.third"> Third</label>
<br>
<button type="button" ng-disabled="ctrl.disableButton()">active/deactive</button>
</div>
</div>
save the values of the checkboxes with ng-model and use them in ng-disabled="!(checkboxValue1 || ch...)"
use ng-model for saving the values and ng-requried="!checkBox2Value && !checkbox3Value" with the checkboxes. Put a form around the checkboxes and use ng-disabled="formName.$invalid"
Related
I have a lot of input tags for the following form:
<input class="checkbox" type="checkbox" value="something_I_need_when_checked">
I need the value of all the checked boxes. When I call console.log(d3.selectAll("input.checkbox:checked").property("value")) I only see the value of the first element. This post had some leads on how to change these values (EDIT: I don't want to change anything; I just want the values). I tried using the selection.each(function()) idea that was suggested but I didn't get me anywhere. How can I get all values in my selection.
I'm a n00b, be nice. Thanks ~
selection.each does work. However, you have to call it after clicking the checkboxes.
In this demo, the selection will be created after you click the button named "Check". Click the boxes you want, and after that click the button:
d3.select("button").on("click", function() {
var boxes = d3.selectAll("input.checkbox:checked");
boxes.each(function() {
console.log(this.value)
})
});
<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>
EDIT: storing the checked values in an array:
var checked = [];
d3.select("button").on("click", function() {
var boxes = d3.selectAll("input.checkbox:checked");
boxes.each(function() {
checked.push(this.value)
});
console.log(checked)
});
<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>
Another way to get the fields into an array is to use the map function. In the example below, I build off of Gerardo Furtado's answer.
d3.select("button").on("click", function() {
var checkedBoxes = d3.selectAll("input.checkbox:checked").nodes().map(box => box.value);
console.log(checkedBoxes)
});
<script src="https://d3js.org/d3.v5.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>
<input type="checkbox" class="allCheck" />all
<input type="checkbox" class="checks" />shoes
<input type="checkbox" class="checks" />bag
<input type="checkbox" class="checks" />car
how to unable and uncheck other checkbox if checkbox all is checked?
NOTE: I want to check multiple checkbox EXCEPT ALL if ALL is checked the others must be unchecked and disabled.
It's fairly straight-forward, but there are gotchas:
If .allCheck is changed by the user, drive the .checks checkboxes from it
If a .checks checkbox is changed by the user, drive the .allCheck checkbox based on whether all or none of .checks are (now) checked
// If `.allCheck` is changed by the user, drive the `.checks` checkboxes from it
$(".allCheck").on("change", function() {
$(".checks").prop("checked", this.checked);
});
// If a `.checks` checkbox is changed by the user, drive the `.allCheck`
// checkbox based on whether all or none of `.checks` are (now) checked
$(".checks").on("change", function() {
var all = $(".checks").get().every(function(cb) {
return cb.checked;
});
$(".allCheck").prop("checked", all);
});
<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note in the above I have not done this
...and disabled
We can, but it's not the way these things are usually most useful. Instead, the above makes it easy to pick all but one (by ticking "all," then unticking the one).
But if you really want that disabled behavior, granted it's a bit simpler: You flag disabled via .prop("disabled", flag) and only have to handle changes to .allCheck.
$(".allCheck").on("change", function() {
$(".checks")
.prop("checked", this.checked)
.prop("disabled", this.checked)
});
<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$('.allCheck').click(function(){
$('.checks').prop('checked',$(this).prop('checked'));
$('.checks').prop('disabled',$(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="allCheck" />all
<input type="checkbox" class="checks" />shoes
<input type="checkbox" class="checks" />bag
<input type="checkbox" class="checks" />car
Is it possible with AngularJs to do: master checkbox which turn on/off it child checkboxes - each one of them showing a different content. Plunkerenter code here
Yes, you can create a master checkbox toggle. Here's a working plunkr.
View
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<input type="checkbox" ng-model="checkbox[0].selected" />
<input type="checkbox" ng-model="checkbox[1].selected" />
<input type="checkbox" ng-model="checkbox[2].selected" />
Controller
// Check/uncheck all boxes
$scope.checkAll = function () {
angular.forEach($scope.checkbox, function (obj) {
obj.selected = $scope.selectAll;
});
};
add the model to the 'ng-checked' expression
<input id="checkSlave" type="checkbox" ng-checked="master || slave1" ng-model="slave1" aria-label="Slave input">
<input id="checkSlave" type="checkbox" ng-checked="master || slave2" ng-model="slave2" aria-label="Slave input">
<input id="checkSlave" type="checkbox" ng-checked="master || slave3" ng-model="slave3" aria-label="Slave input">
add 'master' into ng-show expression
<div ng-show="slave1 || master">Slave one showed!</div>
<div ng-show="slave2 || master">Slave two showed!</div>
<div ng-show="slave3 || master">Slave three showed!</div>
I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them looks like this (part of the form):
<div id="ScrollCB">
<input type="checkbox" name="ALL" value="checked" checked="checked">
All (if nothing selected, this is default) <br>
<c:forEach items="${serviceList}" var="service">
<input type="checkbox" name="${service}" value="checked"> ${service} <br>
</c:forEach>
</div>
What I want to do is control, whether the checkbox labeled "ALL" is checked and if yes - check all other checkboxes (and when unchecked, uncheck them all).
I tried doing this with javascript like this (found some tutorial), but it doesnt work (and Im real newbie in javascript, no wonder):
<script type="text/javascript">
$ui.find('#ScrollCB').find('label[for="ALL"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
}); });
</script>
Could you tell me some simple approach how to get it work? Thanks a lot!
demo
updated_demo
HTML:
<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
JS:
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});
HTML:
<form>
<label>
<input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
<label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>
JS:
$('#selectall').click(function() {
$(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});
http://jsfiddle.net/wDnAd/1/
Thanks to #Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.
FIDDLE
HTML
<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>
<div id="checkboxlist">
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
<label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>
SCRIPT
$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
And now add this to manage the master checkbox as well...
$("input[type='checkbox'].justone").change(function(){
var a = $("input[type='checkbox'].justone");
if(a.length == a.filter(":checked").length){
$('.selectall').prop('checked', true);
}
else {
$('.selectall').prop('checked', false);
}
});
Add extra script according to your checkbox group:
<script language="JavaScript">
function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
for(var i in checkboxes)
checkboxes[i].checked = source.checked;
}
</script>
HTML Code:
<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>
use this i hope to help you i know that this is a late answer but if any one come here again
$("#all").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.
function FnCheckAll()
{
var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
for (i = 0; i < ChildChkBoxes.length; i++)
{
ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
}
}
function FnCheckChild()
{
if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
document.forms[0].CheckAll.checked = false;
else
document.forms[0].CheckAll.checked = true;
}
Master CheckBox:
<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />
Child CheckBox:
<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="#employee.Id" />```
You can use jQuery like so:
jQuery
$('[name="ALL"]:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
A fiddle.
var selectedIds = [];
function toggle(source) {
checkboxes = document.getElementsByName('ALL');
for ( var i in checkboxes)
checkboxes[i].checked = source.checked;
}
function addSelects() {
var ids = document.getElementsByName('ALL');
for ( var i = 0; i < ids.length; i++) {
if (ids[i].checked == true) {
selectedIds.push(ids[i].value);
}
}
}
In HTML:
Master Check box <input type="checkbox" onClick="toggle(this);">
Other Check boxes <input type="checkbox" name="ALL">
You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.
$('document').ready(function(){
$('#ScrollCB input:first').bind('change', function() {
var first = $(this);
first.siblings().attr('checked', first.is(':checked'));
});
});
I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.
Here is the basic idea
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings().prop("checked",this.checked);
});
if there are other elements that are siblings, than you would beed to filter the siblings
$(document).on("click",'[name="ALL"]',function() {
$(this).siblings(":checkbox").prop("checked",this.checked);
});
jsFiddle
I am using the following function that I just found here on SO that does the work with regards to my question only one issue is that, I have a long list of selection and when a user check more than 3-4 checkboxes some of the text or value that is added on the textarea are no longer visible. Is there any way so that everytime a box is check the text that is being added to the text area is always visible? Any help is greatly appreciated.
-thanks ahead!
<input type="text" value="" class="textfield" id="video0_tags" name="video0_tags">
<div class="taglist">
<label><input type="checkbox" value="2D Animation">2D Animation</label>
<label><input type="checkbox" value="3D Animation">3D Animation</label>
<label><input type="checkbox" value="Animatronics">Animatronics</label>
<label><input type="checkbox" value="Architectural">Architectural</label>
<label><input type="checkbox" value="Cartoon">Cartoon</label>
<label><input type="checkbox" value="Cell Animation">Cell Animation</label>
<label><input type="checkbox" value="Character Animation">Character Animation</label><label><input type="checkbox" value="Cut & Paste">Cut & Paste</label>
<label><input type="checkbox" value="Doodle">Doodle</label>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div>
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function() {
allVals.push($(this).val());
});
$('#video0_tags').val(allVals)
}
$(function() {
$('#video0_tags input').click(updateTextArea);
updateTextArea();
});
first, you will need to have a textarea element, so change the input tag with the textarea.
Then on updateTextArea function, you can set the rows attribute on it so that all the text within it is visible. see http://jsfiddle.net/7b5fk/1/
First, you'll want to change video0_tags to a textarea. Next, you'll want to attach the .click() event to each checkbox so that every selection updates the textarea accordingly.
<textarea id="video0_tags"></textarea>
$(document).ready(function(){
$(".taglist input").click(function(){
$("#video0_tags").text('');
$(".taglist :checked").each(function(){
$("#video0_tags").append( $(this).val() + "\n");
});
});
});
Change the text input to a textarea and it will automatically add a scrollbar as it needs it.