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>

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

1 个答案: