CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-5
Roro
Roro

Reputation: 117

hiding divs based on radio button selection using jquery

I have two radio buttons for true and false. when I select the false I want to hide the orderaddress1 label and textbox. I used jquery It seems to not be working

this is my radio button view:

<div class="delivery">
        <div class="form-group">
            @Html.LabelFor(model => model.DeliveryChoice, "DeliveryChoice", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", true) Deliver my order to me</label>
                </div>
                <div>
                    <label>@Html.RadioButton("DeliveryChoice", false) I will pick up my order</label>
                </div>
            </div>
        </div>
            </div>

view for text box and label:

<div class="Add1">
            <div class="form-group ">
                @Html.LabelFor(model => model.OrderAdress1, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.OrderAdress1, new { htmlAttributes = new { @class = "box" } })
                    @Html.ValidationMessageFor(model => model.OrderAdress1)
                </div>
            </div>
        </div>

Jquery:

<script>

    $(document).ready(function(){
        $('#radio_button').click(function () {
            if ($("input[name='name']:checked").val() == false)
                $('.Add1').hide();
        });

        });

</script>

Upvotes: 2

Views: 6294

Answers (3)

user3559349
user3559349

Reputation:

You jQuery selectors are incorrect

You don't have an element with id="radio_button" so $('#radio_button') does not exist. Then inside that, you have $("input[name='name']:checked") but you don't have any inputs with name="name"

You script needs to be

// cache elements that you repeatedly reference
var address = $('.Add1');
// handle the change event of all radio button inside elements with class="delivery"
$('.delivery input[type="radio"]').change(function() {
    if ($(this).val() === 'true') {
        address.hide();
    } else {
        address.show();
    }
});

Refer fiddle

Side notes:

  1. Your @Html.LabelFor(model => model.DeliveryChoice, ...) is creating a label which will select the first radio button (unlikely to be what the use expects)
  2. Your generating invalid html because both radio buttons have duplicate id attributes. Since you don't need the id, you can use @Html.RadioButton("DeliveryChoice", true, new { id = "" })
  3. Its unclear why you divs have class names instead of id attributes. If you have multiple divs with class="delivery" and class="Add1" then the above script will need to be modified to use relative selectors.

Upvotes: 3

vahid tajari
vahid tajari

Reputation: 1303

try this:

  $(document).ready(function () {
    $('input[name=DeliveryChoice]').change(function () {
        $(this).attr('value') === 'False' ? $('.Add1').hide() : $('.Add1').show();
    });
});

Upvotes: 0

Bilal Hussain
Bilal Hussain

Reputation: 1011

try 

<script type="text/javascript">
    $(document).ready(function(){

$('input:radio[name="name"]').change(function(){
    if($(this).val() == 'false'){
        $('.Add1').hide();   }
});

});
</script>

Upvotes: 0

Related Questions