问题

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

回答1:

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.

回答2:

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

Works for jQuery 1.6+.

Earlier versions:

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

回答3:

Try this..

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

回答4:

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

回答5:

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>

来源：https://stackoverflow.com/questions/28606119/add-checked-property-to-checkbox-in-jquery

标签

javascript