When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.
How do I make dat.gui update the checkboxes?
Edit: Here's the current state of the problem.
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.
I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
Then set your variable that dat.gui is controlling via the checkbox to false.
menu['This is an example'] = false;
Some more info about the details of dat.gui: http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
Related
I have the following JavaScript code:
var radios = form.elements["option_filter"];
for (var i = 0, max = radios.length; i < max; i++) {
if (typeof (radios[i].value) !== 'undefined') {
radios[i].onclick = function () {
var l = this.nextElementSibling.innerText;
<code to create a path containing selection>
window.location.replace(dest);
}
}
}
which works fine, except that when a radio is clicked, the selection is considered checked in code, but that is not reflected in the UI ... the radio button remains blank as the redirect is processed.
I tried having it sleep a bit between the onclick firing and the redirect, to no avail.
How do I get the UI to reflect the selection change so that the user sees it selected while waiting for the new page to load?
To get the UI to reflect... you'll need to set the value of the target radio button to a value...
radio[i].value = "whatever"
Also remember that the value set must match the name of one of the radio buttons in your options...
I have an angular app in this plunker.
When we click on the button, it opens a modal dialog with a list of items. 2 of these items are pre-checked based on the condition in the checkbox table input.
This is the function that pushes and splices:
$scope.toggleCheck = function (course) {
//debugger
var x = $scope.checkplanneddetails(course);
if ($scope.selectedCourses.indexOf(course) === -1){
$scope.selectedCourses.push(course);
$scope.planned += 3;
} else {
$scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1);
$scope.planned -= 3;
}
$scope.getPercentage();
};
When a course is selected(checked) from this list, it adds 3 to the $scope.planned and also increases the progress bar accordingly. Similarly it also reduces in the same way when a checkbox is unchecked.
But this functionality happens in reverse for the items that are already checked when the modal dialog loads. Where is the code going wrong?
the problem is you're trying to hold state of checkboxes in attitional array. Instead you should only use "ng-" directives (like ng-model, or ng-checked for checkboxes)
http://plnkr.co/edit/Nm9N2zdBZL7IubMCatjz?p=preview
here is my modification:
$scope.toggleCheck = function (course) {
//debugger
if(course.checked){
$scope.planned += 3;
} else {
$scope.planned -= 3;
}
$scope.getPercentage();
};
and also i've changed "ng-clicked" for "ng-changed", because the first one is triggered before actual change of value
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it.
Here is the JavaScript function:
function tabModifiedHighlight(){
alert("alert");
var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
for(i=0; i<(tabs.length); i++){
selectedTab = tabs[i]+'tab';
if (document.getElementById(selectedTab).className == "selectedtab"){
div = document.getElementById(tabs[i]),
input = div.getElementsByTagName('input'),
selects = div.getElementsByTagName('select');
break;
}
}
highlighted = false;
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].checked == true){
highlighted = true;
}
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
highlighted = true;
}
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
if (selects[selectIndex].value != ""){
highlighted = true;
}
}
if (highlighted == true){
document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}
}
And here is the input that is calling it:
<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />
This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.
I hope I made this clear, and any thoughts are appreciated!
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlight is last one..
if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.
I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...
It will help you find which one is actually failing then you can add that code here and we will be able to help you further
I have code which generates markers on a Google map based on certain criteria. What I'm attempting to do is generate a list next to the map which would contain the address associated with each marker that appears on the list as well as a checkbox next to each address. At the bottom of this list would be a "refine" button which would return only the results which had their checkbox selected.
My question are:
How would I store the dynamically generated checkboxes and their respective address fields so that I could update and modify the selection with the refine button?
How would I (or should I) actually set each checkbox to run a function on onClick which would remove the marker from the map?
Create checkboxes on the fly inside a given div
var holder = document.getElementById('holdingDiv');
var newCheckbox = document.createElement('input');
newCheckbox.type = 'checkbox';
newCheckbox.id = 'holdingDiv_option' + someValueIdentifier;
holder.appendChild(newCheckbox);
To run through these checkboxes adding event handlers:
// modify this if not just a bunch of checkboxes in a div:
var checkboxes = holder.getElementsByTagName('input');
for(var i=0; i < checkboxes.length; ++i) {
var thisCheckBoxId = checkboxes[i].id;
// create a listener
var callback = function(event) {
myGeneralHandler(i, event);
}
if(checkboxes[i].addEventListener) {
checkboxes[i].addEventListener('click', callback, false);
} else { //IE
checkboxes[i].attachEvent('click', callback);
}
}
Then set up myGeneralHandler to handle clicks from any checkboxes.
I have a default page which loads different controls on pageload according to the querystring.
I have a control which creates checkbox list (inside div_A) on load and get checkbox checked through database, then i click Continue, div_A get invisible with all the checked checkbox id in hidden field and div_B is visible true.
On Go Back click, div_B is visible false and div_A get visible true and following javascript is fired to check the selected checkbox, but it does not work
Javascript :
function goBack()
{
var SIds = document.getElementById("<%=hdv_Data.ClientID %>").value; // hdv_Data is the hidden field
var Ids_Arr = new Array();
Ids_Arr = SIds.split(',');
for (j = 0; j < Ids_Arr.length; j++)
{
if(Ids_Arr[j] != 0)
{
alert(Ids_Arr[j]); // works till here, gets correct values in array
var chk = document.getElementById(Ids_Arr[j]);
alert(chk);
chk.checked = true;
}
}
}
I wish it may help you im using this to hide and show some fields in a jsp, you may arrange it to fit your need.
- javascript
function showArea(){
var checkbox = document.getElementById('codcheckbox');
if(checkbox.value==true){
var element = document.getElementById( 'dataFields' );
if (element && element.style.display=='none'){
element.style.display='block';
}else{
element.style.display='none';
}
}
};
jsp form content...
<tbody id="dataFields" style="display: none">
<OTHER STUFF>
</tbody>