jQuery單選按鈕問題

Question

我正在使用jQuery顯示和隱藏div。 但是即使在真實情況下，條件也會執行。 我想知道我的錯誤是什么。 感謝您的任何幫助。

 $(".budget").on("change",function () { var radioValue = $(".budget:checked").val(); if (radioValue=="haveBudget") { alert($(this).val()); } else { alert("else part"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="pref" class="budget" value="haveBudget" /> <input type="radio" name="pref" class="budget" value="10" /> 

Answer 1

您需要在代碼中進行一些基本更改：

 // it's better to use event delegation $(document).on("change", ".budget", function () { var radioValue = this.value; // <-- You have the value because "this" is the input if( radioValue == 'haveBudget' ){ console.log('show DIV'); // do whatever.. show your DIV } else{ console.log('hide DIV'); } console.log("---- value selected ----", radioValue); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="radio" name="pref" class="budget" value="haveBudget" /> <span>Have Budget</span> </label> <label> <input type="radio" name="pref" class="budget" value="10" /> <span>10</span> </label> 

了解有關事件委托的更多信息

Answer 2

 $(".budget").on("change",function () { var radioValue = $(this).val(); if (radioValue=="haveBudget") { alert($(this).val()); } else { alert("else part"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="pref" class="budget" value="haveBudget" />haveBudget <input type="radio" name="pref" class="budget" value="10" />10 

使用this來訪問當前對象的值。