CODEWITHSUNDEEP
htmlcss
Igorski88
Igorski88

Reputation: 1173

Input Checkbox checked by default

For the life of me I can't set my CheckBox to checked at page load. I have tried adding value="true" and Checked="checked" after id and still nothing. Any ideas?

<input type="checkbox" class="onoffswitch-checkbox" id="inline">

Upvotes: 85

Views: 287047

Answers (9)

Dui Samarasinghe
Dui Samarasinghe

Reputation: 247

This can be done in several ways, First you can add "checked" attribute in <input> tag.

<input type="checkbox" class="onoffswitch-checkbox" id="inline" checked>

If this is not work then you can check the checkbox using javascript.

document.getElementById("inline").checked=true;

You can add this js code within a function (checkbox will check with function execution event) or at the end of the html file within <script> tag.

Or else you can use jQuery for this.

$("#inline").prop("checked", true);

This also you can use inside a function or document.ready block.

$( document ).ready(function() {
    $("#inline").prop("checked", true);
});

This will check the checkbox after completely load the page.

Upvotes: 0

Muhammad Asad
Muhammad Asad

Reputation: 16

you can copy this code and paste your project.i solve problem.

<input type="checkbox" class="onoffswitch-checkbox" id="inline" checked>

input tag element in attribute for checked

Upvotes: 0

user7207170
user7207170

Reputation:

The attribute checked="checked" does work and the shorthand notation is just checked.

<input type="checkbox" class="onoffswitch-checkbox" id="inline" checked="checked"/>

Upvotes: 8

Jefferson Paul Jones
Jefferson Paul Jones

Reputation: 347

I think it's worth adding that setting the checked attribute will check the box and not allow it to be unchecked by the user. If the desired functionality is for the checkbox to be checked by default but still able to be unchecked by the user, use the defaultChecked attribute:

<input type="checkbox" id="inline" defaultChecked />

or

document.getElementById("inline").defaultChecked = true;

Upvotes: -1

willingdev
willingdev

Reputation: 9596

 <input type="checkbox" checked />

Upvotes: 0

Peter ID
Peter ID

Reputation: 243

added "true" parameter below, just try it before, and it works for me

<input type="checkbox" class="onoffswitch-checkbox" id="inline" checked="true">

Upvotes: 21

Igorski88
Igorski88

Reputation: 1173

I tried all above solutions and nothing worked. It did give me some terminology to continue my research. What I ended up doing was going to the bottom of the code and added $('#inline').prop('checked', true); This solved my problem.

Upvotes: 5

tao
tao

Reputation: 90068

You're looking for the checked content attribute. Here's the relevant snippet from the official documentation: (Living Standard):

The checked content attribute is a boolean attribute that gives the default checkedness of the input element. When the checked content attribute is added, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to true; when the checked content attribute is removed, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to false.

Note the docs have links to definition of relevant terms.

If it seems too technical, you can always go to MDN page on checked. MDN contributors have put up considerable effort into "translating" HTML Standard into more readable/understandable form (often times with examples), especially useful to people without a solid foundation on web related terminology and concepts.

Note: You'll also find the direct answer to your question on MDN.

Upvotes: 1

Orange Orange
Orange Orange

Reputation: 1981

just write "checked" and it works 

 <input type="checkbox" class="onoffswitch-checkbox" id="inline" checked>

Upvotes: 144

Related Questions