javascript - 如何在 JavaScript 中更改 HTML 复选框状态？

Question

HTML 源代码:

'<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>';

输入结账对象如下

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

当我这样做时，复选框没有正确更改。该框未绘制或检查。

所以

$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'));
      });

当我点击强制时，我改变了状态，但它没有改变。

如何在 JavaScript 中更改 HTML 复选框状态？

Answer 1

$("#sn-checkbox-open-in-new-window").prop("checked") 获取复选框值

$("#sn-checkbox-open-in-new-window").prop("checked", TRUE); 检查它

$("#sn-checkbox-open-in-new-window").prop("checked", FALSE); 取消选中

$("#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>