這段代碼有什麼問題？ .checked可能是我沒有正確使用的那個

我有一個簡單的html表單。它在登錄頁面出現問題，兩個單選按鈕，一個用於忘記密碼，另一個用於忘記用戶名。當用戶單擊其中一個單選按鈕時，會在選項下方顯示一個小表格，然後他可以繼續進行。我剛剛寫了用戶名部分。併爲它寫了一個小函數，但它並不真正工作，事實上，它根本不工作。這段代碼有什麼問題？ .checked可能是我沒有正確使用的那個

我檢查了jquery選擇器，表單#usernamedrop確實隱藏，但if語句無法正常工作。

$(document).ready(function(e){ 
    $("#usernamedrop").hide(); 
    $("#usernameradio").change(function(e){ 
     if($("#usernameradio").checked){ 
      $("#usernamedrop").show(); 
     }else { 
      $("#usernamedrop").hide(); 
     } 
    }); 
});

的HTML如下：

<body> 
<div id="logindiv"> 
<h1>What is the problem?</h1> 
    <div> 
     <div class="formentry"> 
      <input type="radio" name="troublekind" id="usernameradio" value="username"> 
      <label for="usernameradio">I forgot my username</label> 
     </div> 
     <div class="formentry"> 
      <input type="radio" name="troublekind" id="passwordradio" value="password"> 
      <label for="passwordradio">I forgot my password</label> 
     </div> 
    </div> 
    <form id="usernamedrop"> 
     <h2>Please Enter</h2> 
     <div class="formentry"> 
      <label for="dateofbirth">Date Of Birth</label><input type="date" name="dateofbirth" id="dateofbirth"> 
     </div> 
     <div class="formentry"> 
      <label for="placeofbirth">Place Of Birth</label><input type="text" name="placeofbirth" id="placeofbirth"> 
     </div> 
     <input type="submit" name="submitusernamedrop" value="Submit"> 
    </form> 
</div>

來源

2014-09-22 notANerdDev

謝謝所有，不只是糾正代碼。在這裏真正學到了關於對象和DOM選擇的東西。 – notANerdDev 2014-09-22 07:10:57

你混合Vanialla JS和jQuery。 $("#usernameradio")是一個jQuery對象，它不具有checked屬性。

您可以用多種方式獲得checked屬性：

this.checked;，簡單，最好的辦法
$(this).is(':checked');
$(this).prop('checked');

使用

$("#usernameradio").change(function(e){ 
    if(this.checked){ 
     $("#usernamedrop").show(); 
    }else { 
     $("#usernamedrop").hide(); 
    } 
});

來源

2014-09-22 06:24:17 Satpal

屬性checked位於DOM元素上，而不是jQuery集合。 this指的是元素，所以你可以做this.checked或$(this).prop('checked')。最後，您還可以使用toggle，這需要一個「開關」，以隱藏或顯示元素：

$("#usernameradio").change(function(){ 
    $("#usernamedrop").toggle(!this.checked); 
});

來源

2014-09-22 06:26:49 elclanrs

嘗試

$("#usernameradio").change(function(e){ 
    if($(this).prop('checked')){ 
     $("#usernamedrop").show(); 
    }else { 
     $("#usernamedrop").hide(); 
    } 
});

我用.prop檢查，如果酒店有值與否prop('checked')回報如果收音機已選中，則爲true。

來源

2014-09-22 06:27:06 andrex

這段代碼有什麼問題？ .checked可能是我沒有正確使用的那個

回答

相關問題