show fileupload when checkbox is clicked

Question

I am working in asp.net MVC , i face issue when checkbox is clicked then fileupload shows otherwise not shown How can i solve this issue?

Vishal Joshi · Answer

Hello Garima, As it's in foreach loop. it will create duplicate IDs enclcheck for check box control. I would suggest making it by class instead of id. Also, you need to handle textboxfor/file upload control hide and show by class name. otherwise, it will work for only a particular ID (i.e. upfile3) Thanks Vishal Joshi

Garima Bansal · Answer

i used it fro one of the fileupload $(function () { $("#enclcheck").click(function () { if ($(this).is(':checked')) { $("#upfile3").show(); } else { $("#upfile3").hide(); } }); }); but not works. Actually i have multiple fileupload, below is the code can you help me out @foreach (var item in Model.ensredetailslist) { @if (item.ischecked) { } else { } @if (item.ensuretypes == 1) { @item.ensurenames            @Html.ActionLink("Fillup", "form1a", "pdfgeneration", new { @id = @item.ensuretypes, @desc = @item.ensurenames, @applnno = @Model.applnno }, htmlAttributes: new { style = "background-color: #5f9ea0; color: #FFF" }) } else if (item.ensuretypes == 2) { @item.ensurenames            @if (item.ischecked) { View      Delete } else { @Html.TextBoxFor(model => model.approveddocument, new { type = "file", name = "files", id = "upfile3" }) } @Html.HiddenFor(model => item.ensuretypes, new { id = "enclotype3" }) } else if (item.ensuretypes == 3) { @item.ensurenames            @if (item.ischecked) { View      Delete } else { @Html.TextBoxFor(model => model.approveddocument, new { type = "file", name = "files", id = "upfile7" }) } @Html.HiddenFor(model => item.ensuretypes, new { id = "enclotype7" }) } else if (item.ensuretypes == 4) { @item.ensurenames            @if (item.ischecked) { View      Delete } else { @Html.TextBoxFor(model => model.approveddocument, new { type = "file", name = "files", id = "upfile1" }) } @Html.HiddenFor(model => model.enclosurenames, new { id = "ensdesc1" }) @Html.HiddenFor(model => item.ensuretypes, new { id = "enclotype1" }) }

Amit Kumar · Answer

Hi Garima, You can do it using two ways. 1) Server Side 2) Client client (Jquery) I suggest please go with cleint side. use this code. It will help you. suppose your check box is and file upload is use below jquery code it will work for you. $("#isCheck").on('change', function() { if ($("#isCheck").is(':checked')) $("#myfile").css("display", "block"); else { $("#myfile").css("display", "none"); } });

Garima Bansal · Answer

Here is the code

show fileupload when checkbox is clicked

Answers (4)