Default selection of a radio button in HTML

Question

I have a datatable in my asp.net core mvc application and there is a 3 radio button inside one header column for filtering column data in the datatable. But when the page loads, the ALL labeled radio option should be selected by default. How can it be achieved?

I have tried this.

                '<div>' +
                 '<label>Is Active ? </label><br>' +
                 '<input type="radio" name="foo" id="filter-active" /> Active<br>' +
                 '<input type="radio" name="foo" id="filter-non-active" /> Non Active<br>' +
                 '<input type="radio" name="foo" id="filter-all" value="" checked /> ALL' +
                '</div>'

But it shows only like this:

Answer 1

The HTML you have should work fine.

The first debugging step would be to make sure that the HTML is being output correctly by going to "view source."

A second step would be to make sure some JavaScript isn't changing the page state when the page loads.

Highlander Radio Buttons: There Can Only Be One

I'm guessing that because your form controls are in a table, you're outputting multiples of them. This can lead to complications.

HTML is kind of tricky in that if you have a radio button with the same name attribute more than once in a form, only one can be checked at one time.

Put them under different <form> elements to make it work as-expected.

<label><input type="radio" name="foo" value="one" /> One</label>
<label><input type="radio" name="foo" value="two" checked /> Two</label>

<p>... later in the form ...</p>

<label><input type="radio" name="foo" value="abcd" checked /> ABCD</label>
<label><input type="radio" name="foo" value="defg" /> DEFG</label>

If you do have multiple radio inputs with the same name, they'll need to be in a different <form> to work as expected.

<form>
<div>
 Is Active ? <br>
 <label><input type="radio" name="foo" value="one" /> One</label>
 <label><input type="radio" name="foo" value="two" checked /> Two</label>
</div>
</form>

<p>... later in the page, inside a different &lt;form&gt; ...</p>

<form>
<div>
 Is Active ? <br>
 <label><input type="radio" name="foo" value="abcd" checked /> ABCD</label>
 <label><input type="radio" name="foo" value="defg" /> DEFG</label>
</div>
</form>

Other Considerations

Your code isn't using <label> correctly. Apart from not being accessibility-friendly, I can't click the text label and activate the control, which I personally find annoying. Fix this by restructuring as <label><input>Text</label>.

<div>
 Is Active ?<br>
 <label><input type="radio" name="foo" id="filter-active" /> Active</label><br>
 <label><input type="radio" name="foo" id="filter-non-active" /> Non Active</label><br>
 <label><input type="radio" name="foo" id="filter-all" value="" checked /> ALL</label>
</div>