Question

When I create new product, I need to define it is local or not. Product model has IsLocal property in boolean type.

Here is view:

<form action="/Product/Create" method="post" id="Product_Form">
        <div>
            <label>Local</label>
            <input type="radio" name="IsLocal" id="IsLocal" value="yes" checked="checked" tabindex="10" />
        </div>

        <div>
            <label>Not local</label>
            <input type="radio" name="IsLocal" value="no" tabindex="11" />
        </div>

      <div id="yes">
          //some fields looks when product is local.
        </div>
        ...
        <input type="submit" value="Create" class="large" tabindex="17" />
 </form>

Firstly, Local radiobutton is checked. When I check Not local, some fields hide with this code.

<script>
      $("input:radio[name='IsLocal']").click(function () {
      $('#yes').hide();
      $('#' + $("input:radio[name='IsLocal']:checked").val()).show(); });
</script>

But, I should send values to controller with jquery function which i found.

jQuery.post('/Product/Create', {
                    Name: jQuery('#Name').val(),
                    IsLocal: jQuery('#IsLocal').val(),
                    ImagePath: jQuery('#ImagePath').val(),
                    CategoryId: jQuery('#CategoryId').val(),
                    Price: jQuery('#Price').val(),
                    ............................ 
                    formname: 'Product_Form',
                    formtype: 'ProductF'
}

Problem is that, IsLocal is always false. But, other field’s values goes to controller correctly. How should I do that, to send IsLocal value depending on its checking?
(Sorry for bad English)

Edit:

I changed <input> with @Html.RadioButtonFor() :

@Html.RadioButtonFor(model => model.IsLocal, true, new { id = "IsLocal_true", value = "yes", Checked = "checked" })

@Html.RadioButtonFor(model => model.IsLocal, false, new { id = "IsLocal_false", value = "no" })

IsLocal works, but now hiding of panel doesnt work.
Now, How must I change this script? To hide and show <div id="yes"> tag.

<script>
      $("input:radio[name='IsLocal']").click(function () {
      $('#yes').hide();
      $('#' + $("input:radio[name='IsLocal']:checked").val()).show(); });
</script>

Answer 1

Try this: jQuery(‘#IsLocal’).is(“:checked”)

jQuery.post('/Product/Create', {
                    Name: jQuery('#Name').val(),
                    IsLocal: jQuery('#IsLocal').is(":checked"),
                    ImagePath: jQuery('#ImagePath').val(),
                    CategoryId: jQuery('#CategoryId').val(),
                    Price: jQuery('#Price').val(),
                    ............................ 
                    formname: 'Product_Form',
                    formtype: 'ProductF'
}

For Your Edit

See demo here http://jsfiddle.net/43GsG/4/

HTML:

@Html.RadioButtonFor(model => model.IsLocal, true, new { name = "IsLocal", id = "IsLocal_true", value = "yes", Checked = "checked" })

@Html.RadioButtonFor(model => model.IsLocal, false, new { name = "IsLocal", id = "IsLocal_false", value = "no" })

JS:

$("input[name=IsLocal]").click(function () {
    if($('#IsLocal_true').is(":checked")){
      $('#yes').show();
    }
    else {
      $('#yes').hide();
    }
  });