gpt4 book ai didi

javascript - 如何让 JavaScript 中的这个 jQuery 工作

转载 作者:行者123 更新时间:2023-11-30 15:53:03 25 4
gpt4 key购买 nike

我在将 jQuery 转换为普通 javascript 时遇到了很多问题。我是一名新程序员,我很难让它发挥作用。

我必须编码:

<input type="checkbox" name="msg[]" value="26" class="checkbox" />
<button type="submit" class="delete" disabled="disabled">Delete</button>

$(function() {
$(".checkbox").click(function(){
$('.delete').prop('disabled',$('input.checkbox:checked').length == 0);
});
});

例如,您可以在这里尝试 Example

但是我如何将它与 javascript 一起使用呢?

我无法在示例站点上获取此代码以在我的程序中运行。

最佳答案

我假设其意图是除非至少选中一个复选框,否则按钮应该被禁用。

// When the DOM is loaded
document.addEventListener("DOMContentLoaded", function() {
// bind a click handler to the checkboxes' parent element
document.addEventListener("click", function(e) {
// when a click occurs test if the target element has the "checkbox" class
if (e.target.classList.contains("checkbox")) {
// if so, set the disabled state of the button
document.querySelector(".delete").disabled =
// based on whether at least one checkbox is checked
document.querySelectorAll("input.checkbox:checked").length === 0;
}
});
});
<input type="checkbox" name="msg[]" value="32" class="checkbox" />
<input type="checkbox" name="msg[]" value="44" class="checkbox" />
<input type="checkbox" name="msg[]" value="26" class="checkbox" />

<button type="submit" class="delete" disabled="disabled">Delete</button>

我的代码并不直接等同于 jQuery,因为我已经将单击处理程序绑定(bind)到父元素(在本例中为 document,但在您的真实页面中,您应该将其绑定(bind)到复选框的最近父元素)而不是将一个复选框绑定(bind)到每个复选框,但除此之外它几乎是一回事。

请注意,尽管所有现代浏览器都支持 .classList , IE < 10 没有。还有 the DOMContentLoaded eventaddEventListener() method IE < 9 不支持。

关于javascript - 如何让 JavaScript 中的这个 jQuery 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39011672/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com