display alert and checkbox based on radio button value

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>

I am trying to implement a radio box such that when a user clicks on the incomplete radiobox it should display an alert.

If the user clicks on the complete radio box its should show the 'application_complete' box, else hide it.

Here is what I am trying to implement in my jquery function, probably my concept is a bit wrong i guess:

<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>

Thanks guys.. I need to little modification to the code suggested by JREAM. If I check on the application_complete box and then click on the incomplete radio box, can I uncheck the application_complete box again?

Never mind. i figured it out.

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

Answer 1

You have two problems:

1: You have no Event handler, so it only checks your forms when your page loads (And they have no selection made to start with)

2: You did "elseif" but in JS its two words, so your JavaScript broke, do "else if", here is the solution:

<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

You can do it by checking the change() event and comparing the value of the checkbox:

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

I've created a fiddle here to demonstrate.

Answer 3

You need to handle the click event on the radios:

$(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

It would probably be better to use jQuery UI for that, especially a modal box: http://jqueryui.com/demos/dialog/#modal-message

Answer 5

Instead of checking if the radio button is checked, check the radio group's value.