在Internet Explorer 6中獲取「標籤」標籤（對於單選按鈕）

Question

問題： 標籤標籤不能正常工作，點擊標籤並未取消選中單選按鈕。 這適用於Mozilla Firefox，但我無法在Internet Explorer 6中使用它。是否有JavaScript/jquery解決方法。

<p>Would you prefer to walk without effort?</p> 
<input type="radio" value="a" name="radgrp2"/> Yes <br /> 
<input type="radio" value="b" name="radgrp2"/> No <br /> 
<input type="radio" value="c" name="radgrp2"id="rad[1]" style="display:none;"/> 
<label for="rad[1]"><input type ="button"value="Clear"/></label> 

謝謝...

Answer 1

這裏是一個非常簡單的jQuery修復隱藏是一個標籤標記的任何兒童的投入：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
     </script> 

這裏試試：http://jsfiddle.net/VA3EH/1/

這通過在元素上調用show（）也很容易反轉。

這裏是這樣做一個漂亮的，動態的方式：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
      $("input[type='radio']").click(function() { 
       $(this).nextAll("label").find("input").show(); 
      }) 
     </script> 

按鈕被隱藏，單選按鈕直到點擊。一旦單選按鈕，然後清除按鈕顯示。試試看：http://jsfiddle.net/25z3h/

然後，如果你真的想獲得幻想，另附事件處理程序的按鈕，以清除該複選框值，並再次隱藏自身：

 <p>Would you prefer to walk without effort?</p> 
     <input type="radio" value="a" name="radgrp2"/> Yes <br /> 
     <input type="radio" value="b" name="radgrp2"/> No <br /> 
     <input type="radio" value="c" name="radgrp2" id="rad[1]" style="display:none;"/> 
     <label for="rad[1]"><input type="button"value="Clear"/></label> 

     <script> 
      $("label>input").hide(); 
      $("input[type='radio']").click(function() { 
       $(this).nextAll("label").find("input").show(); 
       $(this).nextAll("label").find("input").click(function() { 
        $(this).parent("label").prevAll("input[type='radio']").removeAttr("checked"); 
        $(this).hide(); 
       }) 
      }) 
     </script> 

這裏試試：http://jsfiddle.net/VA3EH/2/

Answer 2

執行此操作的簡單方法是僅使用JavaScript驅動的按鈕來檢查隱藏的單選按鈕。將label元素替換爲以下內容：

<input type="button" value="Clear" onclick= 
"document.getElementById('rad[1]').checked = true" /> 

缺點是，禁用JavaScript時這不起作用。對於不引人注意的JavaScript，您應該使用JavaScript生成此input元素。

請注意，您當前的代碼違反了HTML規則，這兩個規則均爲HTML 4 rule s和HTML5 CR rules。您正將label與兩個元素（一個通過for，一個通過嵌套）關聯，這是禁止的。所以代碼不應該被期望工作。

最好的方法是使「無選擇」選項成爲具有普通標籤的普通單選按鈕。這適用於所有瀏覽器，並且不需要JavaScript：

<input type="radio" value="c" name="radgrp2" id="rad[1]" /> 
<label for="rad[1]">No preference</label>