Okay, so I'm trying to change a checkbox's state programmatically in dashcode. I've tried:
var checkbox = document.getElementById("checkbox");
// I have tried all the following methods.
checkbox.checked = false;
checkbox.selected = false;
checkbox.value = false;
Dashboard Widgets just run on WebKit technologies, so code valid for Safari should also be valid in Dashcode. Either of the following should work:
checkbox.checked = true;
checkbox.setAttribute("checked", "true");
The fact that they are not working indicates there is a problem elsewhere in your code. I would check the line
var checkbox = document.getElementById("checkbox");
Correctly assigns an element to the checkbox variable. Also, check the id of your "checkbox" element is valid and correct (not a duplicate, doesn't have a typo, etc).
This question is one month old as I write this answer. It was probably already solved, but in any case I would like to add that if you are using Dashcode, the Checkbox part is a div which contains one label and one input, this one being the "real" checkbox.
If you inspect the html as it is loaded in Safari you will notice that "checkbox" is the type of the element.
Therefore the proper way to change the state of the checkbox would be, assuming "input" is its id (it could have a default number attached though):
document.getElementById("input").checked="true";
or whichever method you want to use.
The main point here is that you were trying to change the state of another div.
Hope it helps!
checkbox.setAttribute("checked", "checked"); // set
checkBox.removeAttribute("checked"); // remove
This question has been around a while. Regardless, the following works for us:
checkbox.childNodes[1].checked = true;
checkBox.childNodes[1].checked = false;
As pointed out in a previous answer, the way Dashcode creates these controls you need to get past the div wrapper, which has the actual ID (checkbox in this example) and set the property for the input, which is child node 1.
Looking for the actual 'id' of the input would be problematic as you have no control over what id's are assigned to the node. For example if you have two checkboxes then the first one would have 'input' as the id for child node 1 and the second one 'input1', unless, of source you have used 'input' or 'input1' as an id somewhere in your design already!
There might be another method but I have not found it yet.
I don't know which browser you used, but when I tested on FF 3.6, it works.
just put like this:
checkbox.checked = false;
while:
checkbox = document.getElementById('blablabla');
or write like that
document.getElementById('idhere').checked = false;
Maybe:
checkbox.checked = "checked";
Then:
checkbox.checked = "unchecked";
cell = row.insertCell(-1);
sel = document.createElement('input');
sel.setAttribute("type", "checkbox")
sel.setAttribute("name", "myCheckBox")
cell.appendChild(sel);
cell.getElementsByTagName('input')[0].checked = true;
I create a table, row then cell and create a checkbox within it.
I can the grab hold of the first input object and set the checked status to true.
var checkbox = document.getElementById("checkbox");
there is a problem with this line, it should be
var checkbox = document.getElementById('#checkbox");
Related
So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple
in one of my test case, i have to perform a click on checkbox
i tried : -
var cb = element(by.css('#port'+text));
cb.click() // failed
and
browser.actions().mouseMove(cb).click().perform();
is anybody face this kind of issue , is there any other workaround to do this
updated - tried with hard-coded values:
Template
<input type="checkbox" style="min-width:50px;" id="port32201295-a833-45ea-8268-7c4bc0aa9887" ng-checked="port.checked" ng-disabled="port.disabled" ng-click="getSelectedPorts($event,port);
submenu.network.minimizeMaximizePops($event)">
JS
var cb = element(by.css('#port32201295-a833-45ea-8268-7c4bc0aa9887'));
cb.click() // failed(element is not visible | but element is visible have height & width)
browser.actions().mouseMove(cb).click().perform();// nothing happens
Alternatively you can use to click a check box by using element(locator).click()
function setCheckBoxTo(locator, value){
var checkbox = element(locator);
checkbox.isChecked().then(function(selected){
if(selected !== value){
checkbox.click();
}
}
}
Reference here author
Fixed this issue by removing custom styles form checkbox,in my case the real checkbox is override by checkbox look like div , because of this element is not visible for protractor , this happens only in case of check-boxes because i am also using select2.js for select boxes.
I am new to js and jquery. Currently, I have a form at form.php which contains a checkbox. When the user clicks submit, the form variables are sent to a form.js file where each value is checked to be null or not.
The form.js file works perfectly, however, for the checkbox nothing seems to happen. I have a feeling this is due to the way I have declared the variable.
The following is the code for the js file:
var email = $('#email').val();
var website = $('#website').val();
var CHECKBOX = $('CHECKBOX').val();
...
...
if (CHECKBOX.checked == FALSE){
var error = true;
$('#notchecked_error').fadeIn(500);
}else{
$('#notchecked_error').fadeOut(500);
}
Try using:
if ( $('#CHECKBOX').prop("checked") )
or:
if ( $('#CHECKBOX').is(":checked") )
Also, be sure your selector for the checkbox is correct.
I see two problems in your code. The first one is that the selector in your CHECKBOX assignation is faulty. It should be
var CHECKBOX = $('#CHECKBOX').val();
or
var CHECKBOX = $('input[type=checkbox]').val();
the second problem is that you are reading CHECKBOX.checked from the val() function, you need to read it from the checkbox itself.
if(CHECKBOX.checked)
$('input[type=checkbox]:checked') // If you have multiple checkboxes you can use this and loop through them to get additional info
$('#checkboxID:checked').length // To get one specific checkbox
`$('CHECKBOX').val();`
Will try to find an element with a tagname of CHECKBOX and return it's value. Presumably you want to reference the checkbox with an ID of CHECKBOX:
var CHECKBOX = $('#CHECKBOX');
To see if it's checked:
if (!CHECKBOX[0].checked) {
// CHECKBOX is not checked
}
You really should learn basic javascript before using jQuery. Usually validation is initiated from a form submit, which can give you are reference to the form. You can then reference all of the form elements as properties of the form, you don't need to create all of those jQuery objects. e.g. if you form is something like:
<form ... onsubmit="validate(this)"... >
<input type="checkbox" name="checkbox">
</form>
Then in your validate function:
function validate(form) {
if (!form.checkbox.checked) {
// the checkbox isn't checked
}
}
You can attach the listener dynamically if you wish.
I want to change the value of data-confirm attribute on a button (submit) based on user's choices on a form. I put the following on the change function of a dropdown list:
...
if($("#"+select_name).val() == "abc")
{
$(".variable_button").attr("data-confirm","abc is good choice!");
} else
{
$(".variable_button").attr("data-confirm","abc would have been great but this is fine too...");
}
...
The problem I am facing is that apparently data-confirm cannot be changed once it is assigned a non-empty string. I have it set to "" in the server code. And, it changes to one of the two messages shown above when the user first makes a selection on the dropdownlist. But if the user changes the selection one more time, the data-confirm message does not change. Is this per design or am I missing something?
Don't use .attr(), use .data():
var newData = ($("#"+select_name).val() == "abc")
? "abc is good choice!"
: "abc would have been great but this is fine too...";
$(".variable_button").data("confirm", newData);
jQuery does allow you to update a data- attribute with the .attr() method, so something else is breaking.
Here's a working example (JSFiddle):
var counter = 1;
$('#click').click(function() {
button = $('#click');
console.log(button.attr('data-confirm'));
button.attr('data-confirm', 'this is test ' + counter);
console.log(button.attr('data-confirm'));
counter++;
});
Can you try to repo the issue in a JSFiddle?
On rereading your question, it sounds like an event handler isn't firing the second time the user changes the selection. See if you can set a breakpoint in your event handler to see if it even gets hit.
I'm writing a web app. Based on certain choices the user selects, it dynamically creates a number of checkbox input elements. For the sake of usability, they should be created in a checked state, and the user would uncheck the ones they don't want.
I have the code working fine in Firefox. Unfortunately, I have to target IE 7.0. There, I'm having no luck. Here are the relevant parts.
This creates a checkbox in the DIV box with CboxBlock for the ID.
function InsertCheckBox(name, appfk)
{
// Create the text box node.
var tbox = document.createElement('input');
// Set all the values.
tbox.type = "checkbox";
tbox.checked = "checked";
tbox.name = "cbox";
tbox.value = appfk;
// Next, we need a paragraph element to place it in.
var para = document.createElement('p');
// Text to place inside P
para.appendChild( document.createTextNode(name) );
// Append text box
para.appendChild(tbox);
// Attach to the CboxBlock
block = document.getElementById("CboxBlock");
block.appendChild( para );
}
In Firefox, this works right off the bat. The checkboxes are checked. In IE, they are not. So I added another function to fire after creation:
function SetCheckboxes()
{
block = document.getElementById("CboxBlock")
//cboxes = document.getElementsByName("cbox");
cboxes = block.childNodes;
for (ind in cboxes)
{
box = cboxes[ind];
box.checked = "checked";
}
}
I found the stupid bug where getElementsByName wasn't returning anything, but this still changes nothing. The text boxes are unchanged. I even tried changing it to box.checked = true, like I've seen in a few places, but that still didn't change it.
Can anyone see where I might be making a mistake? Is there some other way I'm supposed to manipulate checkboxes in IE? Thanks for any info you can provide.
I believe IE accesses it as an attribute, not a property.
box.setAttribute('checked', 'checked');