JS脚本将输入类型从复选框更改为单选？

Question

我有一个带有列表的 mailpoet 表单，因此人们可以从多个订阅中进行选择。

  <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>

问题是，我只希望他们选择一个。基本上，列表不需要是一个复选框，而是一个单选按钮（只允许一个选择）。

这是生成列表的方式，我无法编辑 html。

将输入类型替换为无线电的正确脚本是什么（并且只允许一个选择。）

Answer 1

您可以使用document.querySelectorAll 获取所有复选框。然后将属性type从checkbox设置为radio。

只要确保所有单选框都具有相同的名称，这样您就只能选择一个。

// 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>