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 e 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!!

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 e 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!!

• javascript
• jquery
• html
• checkbox

• how are you inserting HTML? – Bhushan Kawadkar Commented Feb 19, 2015 at 12:15
• 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 Commented Feb 19, 2015 at 12:16
• can you add that code in your question – Bhushan Kawadkar Commented Feb 19, 2015 at 12:17
• 1 "...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 Commented Feb 19, 2015 at 12:18
• 1 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 Commented Feb 19, 2015 at 12:22

5 Answers 5

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./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./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.

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

Works for jQuery 1.6+.

Earlier versions:

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

Try this..

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

I reend 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/>);
});

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>