This below is a snippet from the code that I am working on. The short version of this is when a radio button with a label of NO is NOT checked, then the details textbox will show. I simply want to add another condition which allows the box to be shown IF another label is checked.
Example: IF 'NO' OR 'HOW MANY PEOPLE' are checked, then show the textbox.
I have been trying using the pipes but to no success.
if ($this.siblings('label').text() != 'No') {
if ($this.is(':checked')) {
$details.show();
$prompt.hide();
}
}
Thanks to anyone in advance, I know this is a simple question Im just a bit stuck!
Use an OR boolean :
if ($this.siblings('label').text() != 'No' || $this.is(':checked'))
$details.show();
$prompt.hide();
}
In your case, you were doing an AND boolean (which is coded in javascript by &&)
More info on javascript booleans here : http://www.quirksmode.org/js/boolean.html
Max
Related
I currently have a radio that displays an additional input field if clicked and hides that input field if another radio is selected. What I am looking to accomplish is that when another radio input is clicked i'd like to clear that text input of any value that was put in it.
I am also utilizing MUI CSS for floating labels on form inputs which appends the .mui--is-empty class to fields that are empty and .mui--is-not-empty class to fields that contain values.
I've tried the following:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'tip-custom') {
$('#show-me').fadeIn();
} else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val('');
}
});
});
But this just sets the value to "" where I need to completely reset this specific field for the .mui--is-empty to append back to it.
Here's is a gyazo of what I am experiencing which you can see the starting state of the floating label and how it reacts when cleared.
https://gyazo.com/b848a5855d27b2d6ebd9202bda7fabe9
Is there a way to completely reset the text input as if there is actually no value?
UPDATE
I was able to accomplish what I was trying to do with the following script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
But i'm concerned that even if the value is set to '' will it return anything on form submit? I would prefer that if there is no actual value that it did not.
I'm not sure my answer is right or wrong because I cant check part of the code. I think you have a typo in your code. So, I think I could fix it. Please, check this code if it works:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name="tip-custom-value"]').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
The typo was inside else statement. I think you forgot to close square brackets for your code.
I hope it works.
I try execute in protractor following scenario:
Find checkbox
Check if it is selected
If yes - go further
If not - select it and go further
For some reason isSelected() function is not working with my checkbox, but I've found some solution. Below code works correctly:
expect(checkbox.getAttribute('aria-checked')).toEqual('false')
It checks some checkbox attribute which is 'false' if not selected and 'true' if selected. (but as a string)
Now the main question. How to write an 'if / else' statement to make it works?
I tried something like that:
if (expect(checkbox.getAttribute('aria-checked')).toEqual('false')) {
checkbox.click();
}
But it always clicks on checkbox no mater if it was selected or not. I've tried also:
if (checkbox.getAttribute('aria-checked').toEqual('false')) {
checkbox.click();
}
But there is an error which says "It's not a function".
Could anybody help me with that?
You can use the below method to solve the problem.
Before clicking any any checkbox, check for the value of aria-checked attribute, if its true don't do anything. Otherwise click on it.
checkBoxElement.getAttribute("aria-checked").then(function(isChecked){
if(isChecked == "false") { //getAttribute will return the value as string.
checkBox.click();
}
})
You could try to make some helper function:
function setCheckBoxTo(locator, value){
var checkbox = element(locator);
checkbox.isChecked().then(function(selected){
if(selected !== value){
checkbox.click();
}
}
}
where [value is true/false]
I need to validate the selection of at least one check box on a table. I am not using an alert because I already have a class on CSS that highlights in red the inputs, selects and other elements if they are not filled out.
This is my JS:
var btnRegister= document.querySelector('#btnRegisterRegObr');
btnRegister.addEventListener('click', function () {
var bError= false;
//I am initializing this boolean variable so that it also shows an error
//message on the screen if the user has not selected any option at all...
var elementCheckRegObr = document.querySelector('#checkRegObr');
if (elementCheckRegObr.checked==false){
bError=true;
elementCheckRegObr.classList.add('error');
//This part of the code brings the error I have
//previously created on CSs if the checkbox is not checked
}
else{
elementCheckRegObr.classList.remove('error');
}
});
The button on HTML has the right id on the HTML: id="btnRegisterRegObr.
I was looking at some codes here and people were validating using the .checked==false
However this does not seem to work for mine.
As a matter of fact, I first thought I needed to use the syntax of if (elementCheckRegObr.checked=="") but that one does not seem to work either.
I dont have problems validating inputs, selects nor radio buttons, but I am not sure if I am doing it on the right way with the check boxes. Any help or advice would be greatly apprecciate it :)
I suggest that you use getElementById to get your elements, and test if the checkbox is checked this way:
if(document.getElementById('idOfTheCheckBox').checked){
alert('hey, im checked!');
}
In the following code, each "Id" is connected to a checkbox, so when I check it a word is printed and if I uncheck it the word disappears.
function DrawRequest()
{
if(document.getElementById("name").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
if(document.getElementById("surname").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
if(document.getElementById("age").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
}
Or at least that is what should have happened when I tried the code. What really happened is that when I checked the checkbox with id "name" nothing printed. The also happened with the checkbox with id "surname." But the last checkbox with id "age" works fine!
One more question: if the three checkboxes are checked will Ihave three words printed ?
Thanks a lot :)
You always update the innerHTML for each box, whether it's checked or not. And each if or else will overwrite what the previous statements set, making the previous actions irrelevant.
You'll want to either:
set the innerHTML to blank at the beginning of the function, get rid of the elses, and only set the HTML to "checked" if a box is checked (not doing anything if it's unchecked), if you want one "checked" total if any box is checked;
append to the HTML rather than setting it, if you want a "checked" for each box; or
Have a separate element to reflect each box's checkedness.
Basically I have a checkbox inside a td element and I want it to have one background color when the checkbox is checked and another background color when the checkbox is unchecked. So in other words I want it to highlight whether it's checked or not.
I tried to use the same solution as in here: Jquery toggle event is messing with checkbox value
But for some reason I can't get it working.
$(document).ready(function(){
$("input:checkbox").change(function() {
if($(this).attr("checked") === "true") {
// CHECKED, TO WHITE
$(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
return;
}
//NOT CHECKED, TO GREEN
$(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
});
});
It does add the green background color but doesn't remove it. And if I leave a checkbox checked, refresh, the td is back to white and once clicking on the checkbox again, unchecking it, it changes the td's background to green.
I'm still new to this, have no idea what could be wrong here, been trying to figure it out for hours now. Such a simple thing but just can't get it working.
There is a better way to see if the checkbox has been checked:
$(this).is(':checked')
It is a bit more robust.
Change
if($(this).attr("checked") === "true")
to
if($(this).attr("checked") === true)
Snce you are comparing using strict equal the two data types must be the same.
typeof ( $(this).attr ( "checked" ) )
will let you know that it is of boolean type and you are comparing it to a string.
For more info see Comparison Operators
if ($(this).attr("checked") === "true")
attr does not read HTML attributes. It's deceptive that way. If it did read attributes, the string value for checked would be 'checked' and not 'true'. But it doesn't do that.
What it actually does is read JavaScript object properties, only using attribute names instead of property names in the few places they differ. The checked property gives you a boolean value so there's no need to compare it to anything, you can just say:
if ($(this).attr('checked'))
or, even simpler, the totally equivalent:
if (this.checked)
best one is
if($("this").is(':checked'))
{
$(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
}
Check out this article on the difference between =, == and === in javascript. Or this on equality operators in js.
Try changing this:
$(this).attr("checked") === "true"
to this:
!!$(this).attr("checked") === true
This will convert any non-boolean to a boolean and allow your type safe comparison to work even if the string "true" is returned (if the string false is returned it will evaluate to true though....)