堆棧內存溢出
  簡體   English   中英

單選按鈕“已檢查”屬性不起作用

[英]Radio Buttons “Checked” Attribute Not Working

 原文  2010-08-31 06:57:08  5   15    html/ forms/ radio-button

問題描述

默認情況下，單選按鈕不會顯示為checked 。 我開始時沒有默認選擇，做了一些非常簡單的 js 驗證，但它不起作用。 所以我選擇只使用默認值，直到我弄清楚並發現發生了一些奇怪的事情。

標記是有效的，我已經在 FF、Safari 和 Chrome 中嘗試過。 什么都行不通。

我認為這與jQuery庫有沖突，因為當我刪除調用腳本時問題就消失了。 

 <label>Do you want to accept American Express?</label> Yes <input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress' value='1' /> No <input style="width: 20px;" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked" />

15 個解決方案

解決方案1
 97  2011-04-05 18:34:27

如果您有多個同名的 check 屬性，它將采用頁面上最后一個選中的收音機。 

 <form> <label>Do you want to accept American Express?</label> Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" /> maybe<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress" checked="checked" /> No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" /> </form>

解決方案2
 36  2013-09-10 10:02:10

這可能是：

jQuery 1.9.1 中的單選按鈕是否存在錯誤？

簡而言之：不要使用 attr() 而是使用 prop() 來檢查單選按鈕。 天啊，我討厭JS...

解決方案3
 35  2017-01-30 19:21:00

無線電輸入必須在表格內，“檢查”才能工作。

解決方案4
 11  2012-05-24 13:06:34

解決這個煩人問題的最終 JavaScript 解決方法 -

只需將 jQuery 命令包裝在setTimeout 。 間隔可以非常小，我使用10毫秒，它似乎工作得很好。 延遲非常小，以至於最終用戶幾乎無法察覺。

setTimeout(function(){
  $("#radio-element").attr('checked','checked');
},10);

這也將與

  • $("#radio-element").trigger('click');
  • $("#radio-element").attr('checked',true);
  • $("#radio-element").attr('checked',ANYTHING_THAT_IS_NOT_FALSE);

Hacky...hacky...hacky...hacky...是的，我知道...因此這是一個解決方法....

解決方案5
 5  2011-10-19 06:10:39

嘿，我也遇到了類似的問題，在 ajax 生成的頁面中.. 我在 FF 中使用 Webdeveloper 插件獲取了生成的源代碼，並檢查了表單中的所有輸入，發現隱藏的 div(display:none) 中有另一個復選框使用相同的 ID，一旦我更改了第二個復選框的 ID，它就開始工作了.. 你也可以試試.. 讓我知道結果.. 歡呼

解決方案6
 3  2010-08-31 07:02:04

剛剛將您的代碼復制到： http : //jsfiddle.net/fY4F9/

否默認選中。 您是否正在運行任何會影響單選框的 javascript？

解決方案7
 2  2016-07-08 17:24:45

jQuery 文檔提供了關於checked屬性與屬性的詳細解釋。

因此，這是另一種檢索選定單選按鈕值的方法

var accepted = $('input[name="Contact0_AmericanExpress"]:checked').val();

解決方案8
 1  2019-02-21 19:17:19

 **Radio button aria-checked: true or false one at a time** $('input:radio[name=anynameofinput]').change(function() { if (this.value === 'value1') { $("#id1").attr("aria-checked","true"); $("#id2").attr("aria-checked","false"); } else if (this.value === 'value2') {; $("#id2").attr("aria-checked","true"); $("#id1").attr("aria-checked","false"); } });

解決方案9
 1  2019-05-15 22:45:35

我可以通過為兩組輸入設置相同的input標簽名稱來重現這一點，如下所示：

<body>
  <div>
      <div>
        <h3>Header1</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_1" value="male"> Male<br>
          <input type="radio" name="gender" id="female_1" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>


  <div>
      <div>
        <h3>Header2</h3>
      </div>
      <div>
          <input type="radio" name="gender" id="male_2" value="male"> Male<br>
          <input type="radio" name="gender" id="female_2" value="female" checked="checked"> Female<br>
          <input type="submit" value="Submit">
      </div>
  </div>
</body>

（要查看運行情況，請單擊 此處）

以下兩種解決方案都可以解決問題：

  1. 為第二組中的輸入使用不同的名稱
  2. 對其中一個組使用form標簽而不是div標簽（無法真正弄清楚為什么這會解決問題的真正原因。很想聽聽對此的一些意見！）

解決方案10
 1  2020-03-04 07:31:09

也試試這個方法

$('input:radio[name="name"][id="abcd'+no+'"]').attr("checked", "checked");

如果有<form />標簽那么("checked", true)否則("checked", "checked")

解決方案11
 1  2012-01-06 22:22:06

嗨，我想如果你為第二個輸入設置 id 屬性並給它一個唯一的 id 值，它將起作用

<label>Do you want to accept American Express?</label>
Yes<input id="amex" style="width: 20px;" type='radio' name='Contact0_AmericanExpress'   value='1'/>  
No<input style="width: 20px;" id="amex0" type='radio' name='Contact0_AmericanExpress' class='check' value='0' checked="checked"/>

解決方案12
 0  2010-08-31 13:28:41

您的代碼是正確的，嘗試調試您的 JQuery 腳本以查找問題！ 如果您使用 FF，您可以安裝一個擴展來調試 JS（和 JQuery），它被稱為 FireBug。

解決方案13
 -1  2014-01-26 14:22:13

只需為您希望默認選中的每個收音機添加已選中的屬性

試試這個：

<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked/>

解決方案14
 -2  2010-08-31 07:06:20

您使用的是非標准的 xhtml 代碼（值應該用雙引號框起來，而不是單引號）

試試這個：

<form>
  <label>Do you want to accept American Express?</label>
  Yes<input id="amex" style="width: 20px;" type="radio" name="Contact0_AmericanExpress"  />  
  No<input style="width: 20px;" type="radio" name="Contact0_AmericanExpress" class="check" checked="checked" />
</form>

解決方案15
 -2  2020-04-12 21:43:34

將checked="checked"替換為checked={true} 。 或者您甚至可以將其縮短為僅checked 。

這是因為被checked prop 的期望值類型是一個布爾值。 不是字符串。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 選中的屬性在單選按鈕中不起作用 帶有html屬性“ checked”的不可檢查的單選按鈕 VueJS 2 v-for 表單輸入單選按鈕檢查屬性不起作用 在多模式彈出窗口中更改默認單選按鈕選中屬性 如何重置除具有選中屬性的單選按鈕之外的所有單選按鈕？ 同時檢查單選按鈕 默認情況下選中單選按鈕 單選按鈕未顯示為選中狀態 檢查數據綁定不適用於淘汰賽 js 中的單選按鈕 為什么：checked 不適用於我的單選按鈕？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM