Add "checked' property to checkbox in jquery

Question

So I have no problem actually setting checkboxes as checked, however in my current case I need to actually add the "checked" property to the checkboxes, as the system I'm working in literally grabs the HTML from the DOM.

I can set the checkbox to be checked, however as there's no identifying "checked" property when the HTML gets inserted again it doesn't hold the property so all checkboxes come back unchecked :(

is there a way to add and remove 'checked' as a property so it will be apparent from the raw HTML what boxes are checked? e.g.

unchecked box

<input type="checkbox" value="yes" />

checked box

<input type="checkbox" checked value="yes" />

Appreciate any help!!

I'm using .html to get the content and .append to insert it back. However I can see in the database there's no identifying property or attribute that indicates the box was checked when it was acquired with .html. — Josh Undefined
– Josh Undefined, Commented Feb 19, 2015 at 12:16
"...when the HTML gets inserted again..." Inserted by what? What do you mean "again"? Page refresh? Updating content? Space aliens hacking the page? — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2015 at 12:18
Sorry guys but you're reading far too much into what the app is doing and it's probably my bad wording in the question. I'm pulling RAW html from the page, but by default it seems checked checkboxes don't have any identifying properties or attributes so the HTML that is extracted doesn't know if they were checked or not, if I can add or remove the checked property it will solve my problem. — Josh Undefined
– Josh Undefined, Commented Feb 19, 2015 at 12:22

T.J. Crowder · Accepted Answer · 2015-02-19 16:08:59Z

I'm pulling RAW html from the page, but by default it seems checked checkboxes don't have any identifying properties or attributes so the HTML that is extracted doesn't know if they were checked or not, if I can add or remove the checked property it will solve my problem.

That's correct, the checked state isn't reflected in the markup you get back from innerHTML for the element.

You can force it to be by explicitly setting and removing the attribute on the element; below is an example doing it when the checkbox is clicked, or alternately you might do it by updating the elements immediately before grabbing their HTML.

This works on Chrome, Firefox, IE11, and IE8, for instance:

$("input").on("click", function() {
  if (this.checked) {
      this.setAttribute("checked", "checked");
  } else {
      this.removeAttribute("checked");
  }
  snippet.log(this.parentNode.innerHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="checkbox" value="yes">
</div>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Note I had to go straight to the DOM to do it, as jQuery has special handling in attr for checked.

jonbaldie · Accepted Answer · 2015-02-19 12:19:45Z

1

$("#checkbox").prop("checked", true);
$("#checkbox").prop("checked", false);

Works for jQuery 1.6+.

Earlier versions:

$("#checkbox").attr("checked", true);
$("#checkbox").attr("checked", false);

answered Feb 19, 2015 at 12:19

jonbaldie

3685 silver badges12 bronze badges

2 Comments

jonbaldie Over a year ago

Then change the id selector or the checkbox's id attribute.

Josh Undefined Over a year ago

Those methods do work in checking and unchecking the box, however there's nothing in the HTML after doing this that identify them as being checked. If I get the html using .html the checkboxes have nothing to indicate them as checked

Deenadhayalan Manoharan · Accepted Answer · 2015-02-19 12:53:46Z

0

Try this..

$( "input[type='checkbox']" ).prop( "checked", true );

answered Feb 19, 2015 at 12:53

Deenadhayalan Manoharan

5,45214 gold badges33 silver badges50 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

I recomend doing the $("#checkbox").attr("checked", true); or $("#checkbox").prop("checked", true);

But if your program or what ever it is that grabs the html cant get the checkbox value you could try to do something like:

On checking event, replace the

<input type="checkbox" value="yes" />

with

<input type="checkbox" value="yes" checked/>

When it grabs the html and reprints it it should be checked.

EDIT

Like $(this).replaceWith('<input type="checkbox" value="yes" checked/>');

EDIT 2

example:

<input type="checkbox" value="yes" />

$("input[value='yes']").on('click', function(){
  $("input[value='yes']").replaceWith(<input type="checkbox" value="yes" checked/>);
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 19, 2015 at 12:25

Wervada

92 silver badges7 bronze badges

4 Comments

Josh Undefined Over a year ago

I think this is the right direction, any insight on how to safely do that replace?

Josh Undefined Over a year ago

thanks for your edit, any suggestions if each checkbox has different names, values etc?

Josh Undefined Over a year ago

Sorry I don't understand :(

Wervada Over a year ago

You can select elements with name or value. $("input[name='xxxxxx']") just write the property you need to select like name or value then ='xxxx' and replace xxxx with the input's name that you wanna select.

Ram kumar · Accepted Answer · 2015-02-19 13:34:48Z

We can do from css too

.nice-form [type="checkbox"],
.nice-form [type="radio"]{
    position:fixed;
    left:0;
    top:0;
    opacity:0;
    z-index: -1;
}
.nice-form .fake-input{
    display: inline-block;
    width:16px;
    height:16px;
    border:1px solid #bbb;
    background:#f8f8f8;
    vertical-align: middle;
    position: relative;
    margin-right: 5px;
}
.nice-form [type=radio] + .fake-input{border-radius:100%;}
 
.nice-form [type="checkbox"] + .fake-input:before{
    content:'';
    width:8px;
    height:4px;
    position:absolute;
    top:50%;
    left:50%;
    border:3px solid #777;
    border-width:0 0 3px 3px;
    opacity: 0;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin:-4px 0 0 -5px;
}
 
.nice-form [type="radio"] + .fake-input:before{
    content:'';
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background: #777;
    border-radius:100%;
    opacity: 0;
}

.nice-form [type="radio"]:checked + .fake-input:before,
.nice-form [type="checkbox"]:checked + .fake-input:before{opacity:1;}
 
.nice-form [type="radio"]:checked ~ .fake-label,
.nice-form [type="checkbox"]:checked ~ .fake-label {color:#f00}
 
.nice-form input:disabled + .fake-input,
.nice-form input:disabled ~ .fake-label{opacity: .5;}

<form class="nice-form">
<label for="check-1">
    <input id="check-1" type="checkbox">
    <span class="fake-input"></span>
    <span class="fake-label">Label text</span>
</label>
  </form>

Collectives™ on Stack Overflow

Add "checked' property to checkbox in jquery

5 Answers 5

Comments

2 Comments

Comments

EDIT

EDIT 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

EDIT

EDIT 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related