I am creating a app in angularjs. I have problem while showing all checkbox selected when page open.
here is my code:
<div class="check_box">
<input type="checkbox" id="checkbox1" name="checkbox" ng-model="selectedAllStatus" ng-click="checkAllTypes()">
<label for="checkbox1"><span for="checkbox1">All</span></label>
</div>
</li>
<li ng-repeat="customersFlowsList in customersFlows | unique:'type'" ng-init="checkAllTypes()">
<div class="check_box">
<input type="checkbox" id="checkbox1" name="checkbox" ng-model="filter[customersFlowsList.type]">
<label for="checkbox1"><span for="checkbox1">{{customersFlowsList.type | customerType}}</span></label>
</div>
</li>
Here is my js code:
$scope.checkAllStatus = function()
{
console.log($scope.selectedAll)
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.customersFlows, function (customersFlowsList) {
$scope.filterLink[customersFlowsList.linkStatus] = $scope.selectedAll;
});
}
On click of button all checkboxes selected(this is working),but I want when page is open then all checkboxes should be selected.
you can do it in controller before template load
$scope.checkAllStatus = function() {
console.log($scope.selectedAll)
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.customersFlows, function(customersFlowsList) {
$scope.filterLink[customersFlowsList.linkStatus] = $scope.selectedAll;
});
}
$scope.selectedAllStatus = true;
$scope.checkAllStatus()
Related
I just need a little help with this code.
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function() {
$('input.class_x').on('click', markIt3);
});
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
My request is the following:
can anybody just FIX what is missing in order for the form Submit button to go back to be disabled as it is supposed to be, because this form only enables it when 2 input type radio have been checked?
This form previous description is the main idea of everything:
A form, with several input type radios. Check at least 2 and the Submit button enables. But if you uncheck any of them, the Submit button should disable back, but I cannot manage to achieve this PART.
I just need a little HELP with IT, nothing else.
Please, DON'T change my code too much!Can it be done?
Check the fiddle right here: https://jsfiddle.net/Suiberu/70tkgk5t/13/
Thanks!
Actually problem is deselecting radio button not detected as a change. How about this
var prv3;
var markIt3 = function(e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
checkIfValid();
};
$(function() {
$('input.class_x').on('click', markIt3);
});
function checkIfValid() {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="radio" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="radio" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="radio" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required/>
</form>
Or you can change the type of your inputs to checkBoxes and it will simply do the magic.
Here is the JSFiddle link.
var prv3;
var markIt3 = function (e) {
if (prv3 === this && this.checked) {
this.checked = false;
prv3 = null;
} else {
prv3 = this;
}
};
$(function () {
$('input.class_x').on('click', markIt3);
});
$('input[type=checkbox]').on('change', function () {
var current = $('input.class_x').filter(':checked');
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled=true;
if (current.length > 1) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
}).change();
input {
display: block;
margin: 0.5em 0;
}
input[type='submit']:disabled {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myform" autocomplete="off" method="post">
<input class="class_x" type="checkbox" name="name_1" value="value_1" id="id_1" />
<input class="class_x" type="checkbox" name="name_2" value="value_2" id="id_2" />
<input class="class_x" type="checkbox" name="name_3" value="value_3" id="id_3" />
<input type="submit" name="name_submit" value="OK" class="class_submit" id="SubmitButton" required />
</form>
Only the type has been changed from radio button to checkbox.
this.checked = false
..does not fire the change event, so the change code doesn't get fired when a radio button is unchecked.
Add the following line of code after that line:
$(this).change();
That will fire the change code.
Try using .prop() function instead
$('input[type=radio]').on('change', function() {
var current = $('input.class_x').filter(':checked');
var $sbmtBtn = $('#SubmitButton');
$sbmtBtn.prop('disabled', true);
if (current.length > 1) {
$sbmtBtn.prop('disabled', false);
} else {
$sbmtBtn.prop('disabled', true);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" class="class_x">
<input type="radio" class="class_x">
<input id="SubmitButton" type="submit">
</form>
.prop() documentation
I have a dropdown menu with checkboxes inside. I want to close the dropdown when the users click outside.
My code is:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
#{
if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
{
//#:<h3>No records were processed.</h3>
}
else
{
foreach (var usr in ViewBag.DataActiveEmployee)
{
<label id="userName">#usr.EmployeeName</label>
<input class="checked" type="checkbox" name="search_emp" id="search_emp" value=#usr.EmployeeName>
#:
}
}
}
</div>
</div>
JS
<script>
var expanded = false;
checkboxes.style.display = "none";
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
$('multiselect').click(function () {
$("#checkboxes").hide();
});
The problem is inside the second function of JavaScript because when I press outside, nothing is happening.
Please help.
Try using the event.target to handle click events:
UPDATE
$(document).on('click', '.multiselect .selectBox', function(e) {
e.stopImmediatePropagation();
$('#checkboxes').show();
});
$('body').on('click', function(e) {
if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) {
$('#checkboxes').hide();
}
});
#checkboxes,
.multiselect {
padding:15px;
border:1px solid #d8d8d8;
}
.selectBox { display: inline; }
#checkboxes { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
</div>
</div>
Check if the target click on dom is the dropdown itself or not as
$(document).on("click", function(event){
var $trigger = $(".checkboxes");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".checkboxes").hide();
}
});
It should work.
I have tried all the solutions i could find but i am stuck. I have 2 checkboxes, HBO and Marvin. Marvin needs to show a div. HBO needs to show nothing. It works until I need to click the checkbox twice for it to show/hide. usually this would be a $apply() issue but that does not seem to be the case. I believe I am not updating the model correctly. I forgot to mention that the checkboxes need to reset to false when the other is true.
plunker
var ctrl = this;
ctrl.showMeMarvin = function () {
if (ctrl.show === true) {
//$timeout(function () {
ctrl.marvin = false;
ctrl.show = false;
ctrl.hbo = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = true;
ctrl.show = true;
ctrl.hbo = false;
//})
}
};
ctrl.showMeHBO = function () {
if (ctrl.show === true) {
// $timeout(function () {
ctrl.show = false;
ctrl.hbo = true;
ctrl.marvin = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = false;
ctrl.hbo = true;
//})
}
};
Just change the div ng-show like this:
<div class="col-xs-12" ng-show="checkedHBO == 1">
And it will work without any additional functions calls.
Edit:
To have it working with the condition to reset the prev selected value you can use this:
<div ng-controller="ShowController as ctrl">
<div class="col-xs-12">
<label for="checkedHBO" class="ts-label">HBO</label>
<input id="checkedHBO" name="mygroup" type="radio" value="hbo" ng-model="checkedHBO" ng-change="checkedMarvin = undefined"/>
<label for="checkedMarvin" class="ts-label">Marvin</label>
<input id="checkedMarvin" name="mygroup" type="radio" value="marvin" ng-model="checkedMarvin" ng-change="checkedHBO = undefined"/>
</div>
<div class="col-xs-12" ng-show="checkedHBO">
<center>
<div class="jumbotron">
DIV 1
</div>
<div class="jumbotron">
DIV 2
</div>
<div class="jumbotron">
DIV 3
</div>
</center>
</div>
</div>
You should be using a radio input instead of checkboxes. http://plnkr.co/edit/hE68w9RKUoFamAWGgRzR?p=preview
<input name="radio" id="checkedHBO" type="radio" ng-model="ctrl.show" ng-value="false" />
<input name="radio" id="checkedMarvin" type="radio" ng-model="ctrl.show" ng-value="true"/>
How to checked checkbox main when sub checkbox not checked ?
When checkbox id="checkItem1" and id="checkItem2" and id="checkItem3" not checked,
i want to auto checked checkbox id="checkAll" how can i do that ?
http://jsfiddle.net/peap/sydzL8Lc/11/
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
you can do it like bellow
$('input[id^="checkItem"]').change(function(){
if($('input[id^="checkItem"]:checked').length===0)
$('#checkAll').prop('checked',true);
})
DEMO
I did a JSFiddle on the full functionality you will need including including when user click the checkAll all boxes change to checked if checkAll is checked or to not checked otherwise. Also there's a on change listener on each of them to listen if the user check all of them and to change the checkAll to checked and backwards.
HTML:
<input type="checkbox" id="checkAll"> Check All
<hr />
<div class='js-checkboxes'>
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item3
</div>
Javascript:
$('.js-checkboxes > input').on('change', function() {
var isAllChecked = true;
$('.js-checkboxes > input').each(function() {
if (!this.checked) {
isAllChecked = false;
}
});
if (isAllChecked) {
$('#checkAll')[0].checked = true;
} else {
$('#checkAll')[0].checked = false;
}
});
$('#checkAll').on('change', function() {
if (this.checked) {
$('.js-checkboxes > input').each(function() {
this.checked = true;
});
} else {
$('.js-checkboxes > input').each(function() {
this.checked = false;
});
}
});
$("input[id^='checkItem']").change(function(){
if(!$("#checkItem1").is(":checked") && !$("#checkItem2").is(":checked") && !$("#checkItem3").is(":checked"))
{
$("#checkAll").prop("checked",true)
}
}
EDIT :- DEMO
I would like hide/show some div's elements, depends on the checkboxes.
I have checkboxes, state was saved to localStorage but my DIV element after refresh are unsaved (load with default state). jQuery(-mobile).
Many thanks for your help.
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
<legend>Some text.</legend>
<div id="checkbox1">
<label>
<input type="checkbox" data-theme="a" name="ligne1" data-iconpos="right" checked="checked" />Ligne 1</label>
</div>
<div id="checkbox2">
<label>
<input type="checkbox" data-theme="a" name="ligne2" data-iconpos="right" checked="checked" />Ligne 2</label>
</div>
<div id="checkbox3">
<label>
<input type="checkbox" data-theme="a" name="ligne3" data-iconpos="right" checked="checked" />Ligne 3</label>
</div>
<fieldset>
$(document).ready(function () {
function getCurrentValue(checkMe) {
return checkMe.is(':checkbox') ? checkMe.prop('checked') : checkMe.val();
}
function checkvalues() {
var original = true;
$(':input').each(function () {
if (getCurrentValue($(this)) !== $(this).data('originalvalue')) {
original = false;
}
});
return original;
}
if (localStorage) {
$(':input').each(function () {
$(this).data('originalvalue', getCurrentValue($(this)));
});
$('#checkbox1').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne1').show();
} else {
$('#ligne1').hide();
}
});
$('#checkbox2').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne2').show();
} else {
$('#ligne2').hide();
}
});
$('#checkbox3').on('change', ':input', function () {
if (checkvalues()) {
$('#ligne3').show();
} else {
$('#ligne3').hide();
}
});
}});
Live example is here.
You need to add the set and get from localStorage in your code.
To set data you need something like this:
// First we setup the data in key/value pairs
var dataContainer = { 'check1':'checked', 'check2':'notchecked'}
// Then save it to localStorage
localStorage.setItem('storedData', JSON.stringify(dataContainer));
And to get data from localStorage:
var dataRetrieved = localStorage.getItem('storedData');
console.log('Local Storage data:', JSON.parse(dataRetrieved))
More info on localStorage MDN Local Storage