查找選定的單選按鈕狀態

我試圖找出單選按鈕的狀態在瀏覽器中的保存位置，以便找到選定的按鈕。

我做了一些研究，發現通過使用 jQuery 和serializeArrayinput可以得到選定的值。

然而，在瀏覽器的 HTML 中，當單擊單選按鈕時，視覺上沒有任何變化。這讓我覺得，這對 Vanilla JS 來說是不可能的？

我對瀏覽器的行為感到很困惑，此外，我不明白它serializeArray是如何作業的。

該檔案指出

.serializeArray() 方法使用成功控制的標準 W3C 規則來確定它應該包含哪些元素；

所以我猜這是一個黑盒子，里面發生了一些魔術，以確定選中的復選框？

function fun() {
  const a = $('#fieldset').find('input')
  const b = a.serializeArray()
    console.log(b)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="fieldset">
    <legend>Select a maintenance drone:</legend>

    <div>
      <input type="radio" id="huey" name="drone" value="huey"
             checked>
      <label for="huey">Huey</label>
    </div>

    <div>
      <input type="radio" id="dewey" name="drone" value="dewey">
      <label for="dewey">Dewey</label>
    </div>

    <div>
      <input type="radio" id="louie" name="drone" value="louie">
      <label for="louie">Louie</label>
    </div>
</fieldset>
<button onclick="fun()">
click me
</button>

uj5u.com熱心網友回復：

基于如何獲得所選單選按鈕的值？，您可以使用以下 Vanilla JavaScript 從單選按鈕中檢索當前選定的值：

document.querySelector('input[name="drone"]:checked').value;

uj5u.com熱心網友回復：

使用這個我認為它會幫助你：

document.querySelector('input[name="drone"]:checked').value;

uj5u.com熱心網友回復：

如果您使用沒有 jQuery 的原生 JavaScript，則可以使用:checked選擇器查詢選定的單選按鈕。

function fun() {
  const { value } = document.querySelector('input[name="drone"]:checked');
  console.log(value);
}

.as-console-wrapper { max-height: 4.33rem !important; }

<fieldset id="fieldset">
  <legend>Select a maintenance drone:</legend>
  <div>
    <input type="radio" id="huey" name="drone" value="huey" checked>
    <label for="huey">Huey</label>
  </div>
  <div>
    <input type="radio" id="dewey" name="drone" value="dewey">
    <label for="dewey">Dewey</label>
  </div>
  <div>
    <input type="radio" id="louie" name="drone" value="louie">
    <label for="louie">Louie</label>
  </div>
</fieldset>
<button onclick="fun()">Click Me</button>

至于serializeArray問題，它正在做這樣的事情：

顯示代碼片段

const serializeArray = (formItem) => {
  const
    container = formItem.closest('form') ?? document.body,
    name = formItem.name;
  let value;
  switch (formItem.tagName.toLowerCase()) {
    case 'select':
    case 'textarea':
      value = formItem.value;
      break;
    case 'input':
      switch (formItem.type) {
        case 'text':
          value = formItem.value;
          break;
        case 'checkbox':
        case 'radio':
          value = container.querySelector(`input[name="${name}"]:checked`).value;
          break;
      }
  }
  return [{ name, value }];
}

function fun() {
  const droneEl = document.querySelector('input[name="drone"]');
  const serialized = serializeArray(droneEl);
  console.log(serialized);
}

.as-console-wrapper { max-height: 6rem !important; }

<fieldset id="fieldset">
  <legend>Select a maintenance drone:</legend>
  <div>
    <input type="radio" id="huey" name="drone" value="huey" checked>
    <label for="huey">Huey</label>
  </div>
  <div>
    <input type="radio" id="dewey" name="drone" value="dewey">
    <label for="dewey">Dewey</label>
  </div>
  <div>
    <input type="radio" id="louie" name="drone" value="louie">
    <label for="louie">Louie</label>
  </div>
</fieldset>
<button onclick="fun()">Click Me</button>

序列化通常發生在表單上，??我們可以通過以下方式為所有表單元素獲取此資訊：

顯示代碼片段

const formAsJson = (form) =>
  (formData =>
    [...formData.keys()].reduce((result, key) => ({
      ...result,
      [key]: result[key] ? formData.getAll(key) : formData.get(key)
    }), {}))
  (new FormData(form));

const serializeArray = (form) =>
  Object.entries(formAsJson(form))
    .flatMap(([name, value]) =>
      Array.isArray(value)
        ? value.map(item => ({ name, value: item }))
        : ({ name, value }));

const fun = () => {
  const serialized = serializeArray(document.forms.settings);

  console.log(serialized);
}

<form name="settings">
  <fieldset>
    <legend>Select a maintenance drone:</legend>
    <div>
      <input type="radio" name="drone" value="huey" checked>
      <label for="huey">Huey</label>
    </div>
    <div>
      <input type="radio" name="drone" value="dewey">
      <label for="dewey">Dewey</label>
    </div>
    <div>
      <input type="radio" name="drone" value="louie">
      <label for="louie">Louie</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Select options:</legend>
    <div>
      <input type="checkbox" name="time" value="morning" checked>
      <label for="huey">Morning</label>
    </div>
    <div>
      <input type="checkbox" name="time" value="afternoon">
      <label for="dewey">Afternoon</label>
    </div>
    <div>
      <input type="checkbox" name="time" value="evening">
      <label for="louie">Evening</label>
    </div>
  </fieldset>
  <button type="button" onclick="fun()">Click Me</button>
</form>

標籤：javascripthtmljQuery

上一篇：如何修復flexdiv以將全高作為其父級

下一篇：使div內的內容可以滾動