jQuery的行動IE

使用方法這裏介紹 - http://www.techiegyan.com/2008/07/09/using-jquery-check-boxes-and-radio-buttons/jQuery的行動IE

我想顯示一個字段中選擇「其他」單選按鈕時，並隱藏同場除此以外。

該方法在非IE瀏覽器上正常工作，但在IE上運行（幾乎）相反... 它看起來像IE在取消選擇選項時觸發「更改」事件，而不是選擇它時。

下面是HTML：

<div><label class="option" for="selection-1"><input type="radio" id="selection-1" name="submitted[selection]" value="10" checked="checked" class="form-radio"> 10</label></div> 
<div><label class="option" for="selection-2"><input type="radio" id="selection-2" name="submitted[selection]" value="20" class="form-radio"> 20</label></div> 
<div><label class="option" for="selection-3"><input type="radio" id="selection-3" name="submitted[selection]" value="50" class="form-radio"> 50</label></div> 
<div><label class="option" for="selection-4"><input type="radio" id="selection-4" name="submitted[selection]" value="100" class="form-radio"> 100</label></div> 
<div><label class="option" for="selection-5"><input type="radio" id="selection-5" name="submitted[selection]" value="0" class="form-radio">other</label></div> 

<div id="other-selection-wrapper"> 
<label for="other-selection">other:</label> 
<input type="text" maxlength="10" name="submitted[other_selection]" id="other-selection" size="10" value="" class="form-text"> 
</div>

和腳本代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#other-selection-wrapper').hide(); 

    $("input[@name='submitted[selection]']").change(function(){ 
    if ($("input[@name='submitted[selection]']:checked").val() == '0') 
     { $('#other-selection-wrapper').show(); } 
    else 
     { $('#other-selection-wrapper').hide(); } 
    }); 

}); 
</script>

來源

2011-04-17 joe

由於@中的@（「input [@ name ='submitted [selection]']」），您的代碼即使在FF中也失敗，因此在FF和IE8中刪除@工作正常。我嘗試了jsfiddle與最新的jquery – 2011-04-17 20:25:26

感謝您的「刪除@」修復 – joe 2011-04-18 13:20:11

我試過，順便說一句，使用鍵盤是這樣的：（a）選項卡到單選按鈕選項。（b）使用箭頭鍵在它們之間移動。使用click（）時，一切正常。 – joe 2011-04-18 13:27:44

從哪裏得到你的例子

的網站，但我忘了提，互聯網只有當您使用 .click（）而不是.change（）

來源

2011-04-17 20:21:32

點擊和更改事件完全不同，使用鍵盤切換元素是一個更改事件，但不是點擊事件。 – 2011-04-17 20:26:11

你說的是非常真實的。我只是通過了我所理解的創作者的評論。正如我在我對這個問題的評論中所說的，在刪除@ – 2011-04-17 20:28:39

時，所有的工作都很好，謝謝！我忽略了這個簡單而重要的評論，並且用頭撞牆來尋找解決方案。它肯定會訣竅。再次感謝！！ – joe 2011-04-18 12:53:08

你爲什麼試圖將無線電組分配給一個html數組？ NAME = 「選擇」是好的...

從您應該能夠顯示/隱藏，像這樣的其他文本框：

<div>.....</div> 
<div><label class="option" for="selection-5"><input type="radio" id="selection-5" name="selection" value="0" class="form-radio">other</label></div> 

<div id="other-selection-wrapper"> 
    <label for="other-selection">other:</label> 
    <input type="text" maxlength="10" name="submitted[other_selection]" id="other-selection" size="10" value="" class="form-text"> 
</div>

jquery的：

$('input[name="selection"]:radio').click(function(){ 
    if($('input[name="selection"]:radio:checked').val() == 0){ 
     $('#selection-wrapper').css({'display':'block'}); 
    }else{ 
     $('#selection-wrapper').css({'display':'none'}); 
    } 
});

[未經測試]

來源

2011-04-17 20:42:51

回答

相關問題