根據單選按鈕值顯示警報和復選框

Question

<input type="radio" id="incomplete" name="app_status" value="incomplete">Incomplete Application<br>
<input type="radio" id="complete" name="app_status" value="complete">Complete Application<br><br>
<div id="app_box">      
   <input type="checkbox" name="application_complete"  value="checked" />Checbox policy

<br><br>
</div>

我試圖實現一個單選框，以便當用戶單擊不完整的單選框時，它應該顯示一個警報。

如果用戶單擊完整的單選框，則應顯示“ application_complete”框，否則將其隱藏。

這是我試圖在我的jquery函數中實現的，我想我的概念可能有點錯誤：

<script type="text/javascript">
$(function(){
    $("#app_box").hide("fast");
    if($("#complete").is(':checked')){
        $("#app_box").show("fast");
    }
    elseif($("#incomplete").is(':checked')){
        alert("Application will be incomplete");
        $("#app_box").hide("fast");
    }
});
</script>

謝謝大家。我幾乎不需要修改JREAM建議的代碼。 如果我選中application_complete框，然后單擊不完整的單選框，是否可以再次取消選中application_complete框？

沒關系。 我想到了。

$('input[name=application_complete]').attr('checked',false);

Answer 1

您有兩個問題：

1：您沒有事件處理程序，因此僅在頁面加載時檢查您的表單（並且沒有選擇任何開始）

2：您做了“ elseif”，但是在JS中有兩個詞，因此您的JavaScript壞了，請進行“ else if”，這是解決方案：

<script type="text/javascript">
$(function(){
    $("#app_box").hide();

    $('input[name=app_status]').change(function() {
      var value = $(this).val();
      if (value == 'incomplete') {
        alert('error msg');
      } else if (value =='complete') {
        $('#app_box').show();
    }
});

});
</script>

Answer 2

您可以通過檢查change()事件並比較復選框的值來做到這一點：

$(function(){
  $("#app_box").hide("fast");
  $('[name="app_status"]').change(function(){
    if (this.value == 'complete') {
      alert('complete');
    } else {
      alert('incomplete');
    }
  });
});​

我在這里創建了一個小提琴來演示。

Answer 3

您需要處理廣播中的click事件：

$(function(){
     var $app_box = $("#app_box").hide("fast");

     $(':radio[name="app_status"]').click(function() {
        if (this.value === "complete")
            $app_box.show("fast");
        else if (this.value === "incomplete") {
            alert("Application will be incomplete");
            $app_box.hide("fast");
        }
     });
});

Answer 4

而不是檢查單選按鈕是否被選中，而是檢查單選組的值。

Answer 5

為此，最好使用jQuery UI，尤其是模式框： http : //jqueryui.com/demos/dialog/#modal-message