how to change HTML checkbox state in JavaScript?

Question

HTML source :

'<div class="checkbox">' +
    '<label for="sn-checkbox-open-in-new-window">' +
    '<input type="checkbox" id="sn-checkbox-open-in-new-window" checked />'+
    lang.link.openInNewWindow +
    '</label>' +
'</div>';

The input checkout object is the following

var $openInNewWindow = self.$dialog.find('input[type=checkbox][id=sn-checkbox-open-in-new-window]');

var isChecked = linkInfo.isNewWindow !== undefined ?
        linkInfo.isNewWindow : context.options.linkTargetBlank;

    $openInNewWindow.prop('checked', isChecked);

When I do this, the checkbox does not change properly. The box is not painted nor checked.

So

$openInNewWindow.on('click', function(event) {
        $openInNewWindow.val('checked').val(false);
        console.log($openInNewWindow.val('checked'));
        //$openInNewWindow.prop(':checked', !$openInNewWindow.prop(':checked'));
        //console.log($openInNewWindow.prop(':checked'));
      });

I changed the state when I clicked force, but it does not change.

How to change HTML checkbox state in JavaScript?

Possible duplicate of Check/Uncheck checkbox with JavaScript? — Obsidian Age
– Obsidian Age, Commented Aug 29, 2017 at 1:39
thank you guys. but i want 'render change' i try this, but not change checkbox button. I tried to force it to change, but it does not change. $openInNewWindow.on('click', function(event) { $("#sn-checkbox-open-in-new-window").prop("checked", false); }); — Vallista
– Vallista, Commented Aug 29, 2017 at 2:39

Peter Stark · Accepted Answer · 2017-08-29 02:20:07Z

1

$("#sn-checkbox-open-in-new-window").prop("checked") to get checkbox value

$("#sn-checkbox-open-in-new-window").prop("checked", TRUE); to check it

$("#sn-checkbox-open-in-new-window").prop("checked", FALSE); to un-check it

$("#toggle-checkbox").on("click", function(e) {
	
  var nextValue = !$("#sn-checkbox-open-in-new-window").prop("checked");
  $("#sn-checkbox-open-in-new-window").prop("checked", nextValue);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-checkbox">Toggle</button>

<div class="checkbox">
  <label for="sn-checkbox-open-in-new-window">
    <input type="checkbox" id="sn-checkbox-open-in-new-window" checked /> lang.link.openInNewWindow
  </label>
</div>

answered Aug 29, 2017 at 2:20

Peter Stark

6084 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vallista Over a year ago

thank you Sudarpo Chong! i click checkbox button checkbox button is not clicked. But if you click on the toggle button, it changes. Why?

Peter Stark Over a year ago

can you rephrase your question? i dont understand.

Vallista Over a year ago

can change the status by pressing the button. The status does not change when the checkbox is clicked.

Peter Stark Over a year ago

You mean from the above code snippet? It's working fine for me. I can toggle using button and also checkbox itself. I tried in Chrome and IE11.

Collectives™ on Stack Overflow

how to change HTML checkbox state in JavaScript?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related