Reputation: 15
I've got a weird behaviour with my checkboxes :
I want to have 9 checkboxes : one for "week", one for "weekend" and 7 for all week days. When I click on "week" I want to set selected monday until friday and when I click on "weekend" saturday and sunday. I succeed in doing that but when I want to do the reverse (when I click on monday, tuesday, wednesday, thursday and friday, I want to set selected week or same thing for weekend) it doesn't work.
I've noticed that in my valueChange functions, I need to do
$scope.weekCBox = !$scope.weekCBox;
for updating my html checkbox week
but no for monday I find that really weird because they are defined in the same way :
Here is my html :
<div style="display:block;">
<b>Semaine</b>
<input type="checkbox" ng-model="weekCbox.value"
ng-change="valueWeekChange($index)"
onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
</div>
<div style="display:block;">
<b>Weekend</b>
<input type="checkbox" ng-model="weekendCbox.value"
ng-change="valueWeekendChange($index)"
onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
</div>
<div style="display:block;">
Lundi <input type="checkbox" ng-model="mondayCBox.value"
ng-change="valueMondayChange($index)"
onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Mardi <input type="checkbox" ng-model="tuesdayCBox.value" ng-change="valueTuesdayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Mercredi <input type="checkbox" ng-model="wednesdayCBox.value" ng-change="valueWednesdayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Jeudi <input type="checkbox" ng-model="thursdayCBox.value" ng-change="valueThursdayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Vendredi <input type="checkbox" ng-model="fridayCBox.value" ng-change="valueFridayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Samedi <input type="checkbox" ng-model="saturdayCBox.value" ng-change="valueSaturdayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
Dimanche <input type="checkbox" ng-model="sundayCBox.value" ng-change="valueSundayChange($index)" onkeypress='return (event.charCode >=45 && event.charCode <=57)||event.charCode==0'>
</div>
and here is my JS code :
$scope.mondayCBox = {
value: false
};
...
$scope.weekendCBox = {
value: false
};
$scope.valueWeekChange = function(index)
{
$scope.weekCBox.value = !$scope.weekCBox.value;
$scope.mondayCBox.value = $scope.weekCBox.value;
$scope.tuesdayCBox.value = $scope.weekCBox.value;
$scope.wednesdayCBox.value = $scope.weekCBox.value;
$scope.thursdayCBox.value = $scope.weekCBox.value;
$scope.fridayCBox.value = $scope.weekCBox.value;
}
$scope.valueWeekendChange = function(index)
{
$scope.weekendCBox.value = !$scope.weekendCBox.value;
$scope.saturdayCBox.value = $scope.weekendCBox.value;
$scope.sundayCBox.value = $scope.weekendCBox.value;
}
$scope.valueMondayChange = function(index)
{
$scope.updateWeekCBox();
}
...
$scope.valueSundayChange = function(index)
{
$scope.updateWeekendCBox();
}
$scope.updateWeekendCBox = function()
{
if ($scope.saturdayCBox.value==false || $scope.sundayCBox.value==false)
{
$scope.weekendCBox.value = false;
}
if ($scope.saturdayCBox.value==true && $scope.sundayCBox.value==true)
{
$scope.weekendCBox.value = true;
}
}
$scope.updateWeekCBox = function()
{
if ($scope.mondayCBox.value==false || $scope.tuesdayCBox.value==false || $scope.wednesdayCBox.value==false || $scope.thursdayCBox.value==false || $scope.fridayCBox.value==false)
{
$scope.weekCBox.value = false;
}
if ($scope.mondayCBox.value==true && $scope.tuesdayCBox.value==true && $scope.wednesdayCBox.value==true && $scope.thursdayCBox.value==true && $scope.fridayCBox.value==true)
{
$scope.weekCBox.value = true;
}
}
If you have any idea, I'd be very glad
Upvotes: 0
Views: 58
Reputation: 15
It's not the correct way to do that but I succeed in doing :
document.getElementById('Id').checked = true;
So I close the post. Thank you for your help
Upvotes: 0
Reputation: 48968
Delete the first condition:
$scope.updateWeekendCBox = function() {
̶i̶f̶ ̶(̶$̶s̶c̶o̶p̶e̶.̶s̶a̶t̶u̶r̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶ ̶|̶|̶ ̶$̶s̶c̶o̶p̶e̶.̶s̶u̶n̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶)̶
$scope.weekendCBox.value = false;
if ($scope.saturdayCBox.value==true && $scope.sundayCBox.value==true)
{
$scope.weekendCBox.value = true;
}
}
And:
$scope.updateWeekCBox = function(){
̶ ̶i̶f̶ ̶(̶$̶s̶c̶o̶p̶e̶.̶m̶o̶n̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶ ̶|̶|̶ ̶$̶s̶c̶o̶p̶e̶.̶t̶u̶e̶s̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶ ̶|̶|̶ ̶$̶s̶c̶o̶p̶e̶.̶w̶e̶d̶n̶e̶s̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶ ̶|̶|̶ ̶$̶s̶c̶o̶p̶e̶.̶t̶h̶u̶r̶s̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶ ̶|̶|̶ ̶$̶s̶c̶o̶p̶e̶.̶f̶r̶i̶d̶a̶y̶C̶B̶o̶x̶.̶v̶a̶l̶u̶e̶=̶=̶f̶a̶l̶s̶e̶)̶
$scope.weekCBox.value = false;
if ($scope.mondayCBox.value==true && $scope.tuesdayCBox.value==true && $scope.wednesdayCBox.value==true && $scope.thursdayCBox.value==true && $scope.fridayCBox.value==true)
{
$scope.weekCBox.value = true;
}
}
For obvious reasons.
Upvotes: 0