I have few checkboxes on my page, with few of them checked by default.
Through my code, I need to handle unchecking of all text boxes on the page and then proceed.
The problem is the checkboxes (both checked and un-checked) have exactly the same HTML / DOM structure with same attributes / values except for the "::after" appearing when the checkbox is checked.
How do I write a locator to find out if the element is checked or unchecked, and then proceed to uncheck it.
<!-- When checkbox is unchecked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox"></span>
</label>
<!-- When checkbox is checked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox">
::after
</span>
</label>
I want a locator, so that I can get attribute if its checked or unchecked, and then uncheck it if already checked.
You could try executing some Javascript on your checkbox element to get the value.
after_value = driver.execute_script
("return window.getComputedStyle(document.querySelector('.someclasslabel'),':after')
.getPropertyValue('content');")
This is a bit of a hack, but worth a try.
After getting all the checkbox elements (with the same selector) no matter if they are checked or not, you can then iterate through them with a loop, and check if they are checked with the selected method. (C# reference here https://seleniumhq.github.io/selenium/docs/api/dotnet/ for RemoteWebElement.Selected Property).
If .selected == true -》click; if not selected, do nothing;
Related
Is there a way in html markup to have a checkbox greyed-out and checked?
I wan't to keep the checkbox styled depending on the browser, so not alter it too much with css.
I'm trying to have a row of 4 checkboxes. One is checked and blue by default, the other three are disabled and greyed out. When you either:
- click on the first one the other three become actively blue again
- or when you click on one of the three disabled ones the first one becomes inactive
<input type="checkbox" checked disabled />
<input type="checkbox" checked onclick="return false"/>
OR
<input type="checkbox" checked disabled />
The disabled will gray it out, the first example won't
Add disabled="disabled" to the end of the input tag. If you wanted the checkbox to be ticked on load add checked instead.
I want to have a checked checkbox behave as an unchecked checkbox, and an unchecked checkbox behave as a checked checkbox. How can this be accomplished?
Context: In my template is a for loop that creates a checkbox for each filter condition. I want to show the user that the initial setting has all checkboxes checked, and they can uncheck them to exclude certain categories. The backend uses exclude statements, therefore it's necessary to invert the checkboxes.
Try the checked attribute
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
for more info w3school
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
Here's the html for my button, according to Chrome:
<input checked="" type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default">
When I run this in my javascript console, the output output is "false"
$("input[type=radio]:first").attr("checked")
The actual UI element is visibly not selected. When I run this code, the button becomes visibly selected:
$("input[type=radio]:first").attr("checked", true)
Looking back at the html in Chrome, I see almost exactly the same thing I saw before. The only difference is that "checked" is now at the end of the tag instead of the beginning?
<input type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default" checked="">
A bit more information: there is another radio group lower down on the page. When I remove this second radio group, the first acts as expected. They are distinct groups. It is possible to manually select buttons from each one.
What's going on here? Why wasn't the button visibly selected to begin with?
##### EDIT
The button was selected to begin with, but wound up getting deselected due to a bug in some event binding code I was running.
The checked attribute corresponds to the checkbox's default checkedness, not its current checkedness.
In other words, the checked attribute corresponds to the defaultChecked javascript property, and not the checked property.
jQuery's $("foo").attr("checked", true) sets the checked javascript property, but doesn't affect the checked attribute.
Why is this line not working?
<input type="checkbox" checked="no"/>
<input type="checkbox" checked="false"/>
Even though i have specified no and false in checkbox value both are checked by default.
Thanks in advance :)
changing it to this will make the first unchecked, and the second checked :
<input type="checkbox" />
<input type="checkbox" checked />
To make the checkbox unchecked you need to remove the word "checked".
Try this -
<input type="checkbox" checked/>
The attribute "Checked" will keep your checkbox checked by default. If you do not have this attribute mentioned, then the checkbox will be unchecked by default.
<input type="checkbox" checked="checked" />
this will pass html validation
Even though i have specified no and false in checkbox value both are checked by default.
this is default behaviour for boolean values in HTML elements.
Only removing the checked attribute altogether will make the element not checked.
The background is in On SGML and HTML:
Some attributes play the role of boolean variables (e.g., the selected attribute for the OPTION element). Their appearance in the start tag of an element implies that the value of the attribute is "true". Their absence implies a value of "false".
Boolean attributes may legally take a single value: the name of the attribute itself (e.g., selected="selected").
If you are purpose is validation and using jquery then you might need to use "change" event rather than "click".