首页 > JavaScript > 如何使用 jQuery 为复选框设置“选中”checkbox

如何使用 jQuery 为复选框设置“选中”checkbox

上一篇 下一篇

我想做这样的事情来使用 jQuery 勾选:checkbox

$(".myCheckBox").checked(true);

或

$(".myCheckBox").selected(true);

这样的事情存在吗?

分割线

网友回答:

用:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

如果您想检查复选框是否被选中:

$('.myCheckbox').is(':checked');

分割线

网友回答:

这是使用 jQuery 选中和取消选中复选框的正确方法,因为它是跨平台标准,并且允许表单重新发布。

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

通过这样做,您将使用 JavaScript 标准来选中和取消选中复选框,因此任何正确实现 checkbox 元素的“checked”属性的浏览器都将完美运行此代码。这应该是所有主要的浏览器,但我无法在Internet Explorer 9之前进行测试。

问题(jQuery 1.6):

用户单击复选框后,该复选框将停止响应“选中”属性更改。

下面是复选框属性在有人点击复选框后无法完成工作的示例(这种情况在 Chrome 中发生)。

小提琴

解决方案:

通过在 DOM 元素上使用 JavaScript 的“checked”属性,我们能够直接解决问题,而不是试图操纵 DOM 做我们希望它做的事情。

小提琴

该插件将更改jQuery选择的任何元素的选中属性,并在所有情况下成功选中和取消选中复选框。因此,虽然这似乎是一个霸道的解决方案,但它将使您网站的用户体验更好,并有助于防止用户感到沮丧。

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

或者,如果您不想使用插件,则可以使用以下代码片段:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

分割线

网友回答:

现代 jQuery

用:.prop()

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

DOM API

如果只使用一个元素,则始终可以只访问底层元素并修改其属性:HTMLInputElement.checked

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

使用 and 方法而不是此方法的好处是,它们将对所有匹配的元素进行操作。.prop().attr()

jQuery 1.5.x 及更低版本

该方法不可用,因此需要使用 。.prop().attr()

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

请注意,这是 jQuery 在 1.6 版之前的单元测试使用的方法,比使用更可取,因为如果最初选中该框,后者将更改包含它的任何形式的调用行为——这是一种微妙但可能不受欢迎的行为更改。$('.myCheckbox').removeAttr('checked');.reset()

有关更多上下文,可以在版本 1.5 发行说明和文档的属性与属性部分中找到一些关于从 1.6.x 到 1.6 的转换中属性/属性处理更改的不完整讨论。checked.prop()

模板简介:该模板名称为【如何使用 jQuery 为复选框设置“选中”checkbox】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 338次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 02-10
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 单页式简历模板 响应式 自适应 微信图片 微信模板 html5 企业网站 微信素材 微信公众平台
您可能会喜欢的其他模板