JS script to change input type from checkbox to radio?

Question

I have a mailpoet form with a list so people can choose out of multiple subscriptions.

  <label class="mailpoet_segment_label">title</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="9" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="2278B8F3-5F48-4047-9B6D-131ED484ADF5">
    Alle Job Alerts</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="4" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="DB7A7A5C-BA6F-4508-9F8F-958BD0B69F58">
    List 1</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="5" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="0F392140-FE75-45C1-970E-AC57D9011B1D">
    List 2</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="8" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="415437C4-9B0D-43BD-9E6D-091EA5F12EC8">
    List 3</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="6" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="28C9611D-DCD1-46BE-8164-FFD1EFCCE257">
    List 4</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="7" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="33C371EB-732F-4D1F-B5B2-1ED87F3A524C">
    List 5</label>
  <span class="mailpoet_error_segments"></span>

Problem is, I only want them to pick one. Basically, The list does not need te be a checkbox, but a radio button (only one selection allowed).

This Is the way the list is generated, zo I cant edit the html.

What would be the right script to replace the input type to radio (and allow only one selection.)

StackByMe · Accepted Answer · 2020-06-29 13:38:56Z

You can use document.querySelectorAll to get all the checkboxes. Then set the attribute type from checkbox to radio.

Just make sure that all radioboxes have the same name, this way you can only select one.

// Select by input type
const checkboxes = document.querySelectorAll("input[type='checkbox']");
// Select by class
// const checkboxes = document.querySelectorAll(".mailpoet_checkbox");

checkboxes.forEach(checkbox => {
  checkbox.setAttribute("type", "radio");
});

<label class="mailpoet_segment_label">title</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="9" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="2278B8F3-5F48-4047-9B6D-131ED484ADF5">
    Alle Job Alerts</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="4" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="DB7A7A5C-BA6F-4508-9F8F-958BD0B69F58">
    List 1</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="5" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="0F392140-FE75-45C1-970E-AC57D9011B1D">
    List 2</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="8" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="415437C4-9B0D-43BD-9E6D-091EA5F12EC8">
    List 3</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="6" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="28C9611D-DCD1-46BE-8164-FFD1EFCCE257">
    List 4</label>
  <label class="mailpoet_checkbox_label">
    <input type="checkbox" class="mailpoet_checkbox" name="data[form_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz][]" value="7" data-parsley-required="true" data-parsley-group="segments" data-parsley-errors-container=".mailpoet_error_segments" data-parsley-required-message="Selecteer een lijst" data-parsley-multiple="dataform_field_YzQxYmU0Njc5OTk5X3NlZ21lbnRz" wtx-context="33C371EB-732F-4D1F-B5B2-1ED87F3A524C">
    List 5</label>
  <span class="mailpoet_error_segments"></span>

Collectives™ on Stack Overflow

JS script to change input type from checkbox to radio?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related