I am working on a user interface that the user will choose a shipping address. The design basically uses a radio button pattern, where the "map" checked would be green and a button would change depending on the map (radio button) checked.
Basically, there is a default button with a primary class and it says "Deliver to this address", but when the card is checked, it should change to "Selected Address". It works now. I first tried to use the "same" button but to change the inner text or html, as well as the classes, but that did not work very well. So, now, I thought about displaying and hiding the buttons depending on the status of the checked radio button.
But I have difficulty with siblings, parents, children, etc. – I cross the DOM to get the effect I want. What I want is that the checked map is green with the "Selected Address" button. This should even be loading the page if one of the cards is checked. And, when I check another card, to "uncheck" all other cards and return this button on the button "Send to this address".
I've created a JS Fiddle to show what I mean entirely: https://jsfiddle.net/gamehendgeVA/b98v65tx/3/
Here is the JS that I was trying:
jQuery (".selectedAddressButton"). hide ();
jQuery (function () {
jQuery (".addressRadio"). change (function () {
if (jQuery (this) .is (": checked")) {
jQuery (this) .siblings (). find (".selectedAddressButton"). show ();
jQuery (this) .siblings (). find (". deliverButton"). hide ();
} other {
jQuery (this) .siblings (). find (".selectedAddressButton"). hide ();
jQuery (this) .parents (). find (". deliverButton"). show ();
}
});
});
(I had to use "jQuery" instead of $ for things to work, because of strange working files, without really knowing why.)
And, an excerpt from one of the radio buttons "cards":
I've thought of turning to the experts to see if I'm on the right track – there may be a simpler way to accomplish what I'm trying to do.
Any help is greatly appreciated!
Thank you!