CODEWITHSUNDEEP
javascripthtmlasp.net
IT researcher
IT researcher

Reputation: 3304

Hide asp radio button text

I have a asp radio button and i want to set it's visibility to false in javascript.

<asp:RadioButton  ID="rad1" Text="my radio button" runat="server" GroupName="b" />

I am trying below code in javascript .

document.getElementById("rad1").style.visibility = "hidden";

But it disables only radio button but the text "my radio button" is visible. I tried setting text , value property to blank text but it didn't work. So how can i hide the text of that radio button.

Upvotes: 2

Views: 4338

Answers (4)

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15158

It's because:

<asp:RadioButton  ID="rad1" Text="my radio button" runat="server" GroupName="b" />

Is actually rendered to (you can view the source):

<input name="b" id="rad1" type="radio" value="rad1">
<label for="rad1">my radio button</label>

So if you want to make both hidden you have to do something like:

var rad1 = document.getElementById("rad1");
rad1.style.visibility = "hidden";
rad1.nextSibling.style.visibility = "hidden";

or an easier approach would be to place the radio button in a div for example, something like:

<div id="foo">
    <asp:RadioButton  ID="rad1" Text="my radio button" runat="server" GroupName="b" />
</div>

and then just do:

document.getElementById("foo").style.visibility = "hidden";

Upvotes: 4

Nima Derakhshanjan
Nima Derakhshanjan

Reputation: 1402

you should use this type of code to get asp.net controls 

document.getElementById('<%=rad1.ClientID %>').style.visibility = "hidden";

by this you can set visibility to false .

Upvotes: 0

Mahmoud Mohamed
Mahmoud Mohamed

Reputation: 45

Try this by JQuery First don't forget to add Jquery CDN at your page Header.

<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

And the functions will be. rdName => is your RadioButton Id

$('#rdName').css('display','none');   //Hide Radiobutton.
$('label[For= "rdName"]').css('display','none'); //Hide Radiobutton Text.

And You have another solution to drag the radiobutton in a and give it an Id. then Hide / Show it, then the radiobutton will aslo be hidden and its text.

Upvotes: 1

HEEN
HEEN

Reputation: 4727

You can use jquery for hiding it,

$('#rad1').parent().hide();

let me know if it works or not. It should work fine

Upvotes: -1

Related Questions