I think this can be done in Javascript but not sure how to do it. Any help would be appreciated:
I have 2 radio buttons - Seller and Buyer
What I want is that if Seller radio button is clicked then what I have labeled OPTION #1 would be checked and if Buyer radio button is clicked the OPTION #2 as labeled below would be checked.
First, you must have the server-side code check that the appropriate things are selected, and give a suitable error response if they’re not. That’s for your own protection.
When the option is changed, the best way is to uncheck all relevant elements, and then check only one of them.
function personOptionEventHandler(evt) {
var form = evt.target.form;
form.elements.Owners.checked = false;
form.elements.Combo.checked = false;
if (evt.target.value === "Seller") {
form.elements.Owners.checked = true;
}
if (evt.target.value === "Buyer") {
form.elements.Combo.checked = true;
}
}
var form = document.querySelector("#myForm");
form.elements.SellerorBuyer.forEach(function (option) {
option.addEventListener("change", personOptionEventHandler);
});
But what happens if someone tries to check the other checkbox?
But what happens when someone unticks the checkbox?
But what happens when someone checks one of the checkboxes?
When a checkbox is ticked, disable the other checkbox.
When no checkboxes are ticked, unselect the radio buttons.
When someone ticks a checkbox, select the appropriate radio button.
So, with those common usage situations in place, you have the following code:
function selectRadio(radioGroup, index) {
radioGroup.forEach(function (radio) {
radio.checked = false;
});
radioGroup[index].checked = true;
}
function deselectAllRadio(radioGroup) {
radioGroup.forEach(function (radio) {
radio.checked = false;
});
}
function resetCheckboxes(checkboxes) {
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
checkbox.disabled = false;
});
}
function personRadioEventHandler(evt) {
var form = evt.target.form;
resetCheckboxes([
form.elements.Owners,
form.elements.Combo
]);
if (evt.target.value === "Seller") {
form.elements.Owners.checked = true;
form.elements.Combo.disabled = true;
}
if (evt.target.value === "Buyer") {
form.elements.Combo.checked = true;
form.elements.Owners.disabled = true;
}
}
function ownerCheckboxEventHandler(evt) {
var form = evt.target.form;
if (evt.target.checked) {
selectRadio(form.elements.SellerorBuyer, 0);
form.elements.Combo.checked = false;
form.elements.Combo.disabled = true;
} else {
deselectAllRadio(form.elements.SellerorBuyer);
form.elements.Combo.disabled = false;
}
}
function comboCheckboxEventHandler(evt) {
var form = evt.target.form;
if (evt.target.checked) {
selectRadio(form.elements.SellerorBuyer, 1);
form.elements.Owners.checked = false;
form.elements.Owners.disabled = true;
} else {
deselectAllRadio(form.elements.SellerorBuyer);
form.elements.Owners.disabled = false;
}
}
var form = document.querySelector("#myForm");
form.elements.SellerorBuyer.forEach(function (option) {
option.addEventListener("change", personRadioEventHandler);
});
form.elements.Owners.addEventListener("change", ownerCheckboxEventHandler);
form.elements.Combo.addEventListener("change", comboCheckboxEventHandler);
Well there you go! I had that problem last time - you would think I should know that; now I do!!
So it works great, and I see that when making the selection, it grays out one of the choices. If there a way that if the Seller wanted to pay for both, or vise versa, it leaves the check box available to select?
We’ll need some extra code then so that the the radio buttons are not changed when both checkboxes are checked, and also so that when both are checked and one is onchecked, the radio will switch over to the remaining checkbox.
You are very good at scripting! I appreciate your help and thank you for your time.
Thanks!
PS. It’s not obvious to me but is there a way to rate your great work, like a point system like some forums have? If so, let me know where that would be.
It seems like you are using the wrong form elements for the type of interaction that you intend.
However, remove the deselectAllRadio function, and remove all lines that placed a call to it.
I removed the function and the 2 lines underneath that. However, if I check the 2nd option, without selecting the radio buttons, it then selects the Seller. Same with selecting the 1st option, selects the Seller radio button.
Have the default as before with the radio buttons. After that, if a user doesn’t select Seller or Buyer and then (by accident) checks on one of the options, then neither Seller or Buyer would be check and it would be up to the user to select one of those options.