javascript实现复选框选中属性

来源: 电脑维修教程 阅读:     发表时间:

本文给各人介绍的是一篇国外网友写的博客,讲解的是关于实现复选框选中属性的问题,感觉非常不错,翻译过来推荐给各人,但愿小伙伴们能够喜欢。

本文给各人介绍的是一篇国外网友写的博客,讲解的是关于实现复选框选中属性的问题,感觉非常不错,翻译过来推荐给各人,但愿小伙伴们能够喜欢。

熟悉web前端开发的人都知道,判断复选框是否选中是常常做的事情,判断的要领很多,但是开发过程中经常忽略了这些要领的兼容性,而是实现效果就好了。博主之前用户不少要领,常常google到一些这个欠好那个欠好的文章,到后面本身都混乱了。今天偶然看到一篇外国的博客,觉得讲解的很不错,计划翻译成中文,并加上了一些本身的见解。

如果你从事web开发而且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句。有很多种要领来判断一个复选框是否选中。

让我们先来看看原生的javascript是怎么判断这个属性的。在javascript中,在你选中了某个元素之后,你可以等闲地通过该元素的checked属性来判断你选中的复选框是否选中了。

我们来看一个例子,在你的页面上面有一个复选框而且该复选框有着独一的id,好比mycheckbox ,如下面所示:

代码如下:

<input type="checkbox" id="mycheckbox"/>;

此刻我们首先通过javascript来选中这个元素然后获取它的checked属性。

代码如下:

function checkcheckbox() {

if (document.getelementbyid('mycheckbox').checked) {

//change it to alert('its checked'); if you not working with console

console.log('its checked');

} else {

console.log('no its not checked');

}

}

可以看到,我们先通过id选中了这个元素然后判断它的checked属性,如果复选框选中了,它的值是true,如果复选框没有选中,它的值将是false。

如果你使用的是jquery而且你不想用原生的javascript来进行这个判断,要领有很多:

使用 is(':checked')

这个用法中你将使用jquery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满足你通报给该函数的条件参数,如果条件符合,电脑维修视频教程,返回true,不然返回false。

所以为了使用这个函数,我们需要选中元素然后检测选择器:checked 的值,这个选择器适用于复选框、单选按钮和select标签。

[/code]

$('input[type="button"]').click(function () {

if ($('#mycheckbox').is(':checked')) {

//change it to alert('its checked'); if you not working with console

console.log('its checked');

} else {

console.log('no its not checked');

}

});

[/code]

使用 prop()

在jquery1.6之前,函数attr()用来获取元素的property 和attributes,但长短常容易让人发生疑惑。所以jquery1.6之后,一个新的函数prop()来获取元素的当前的property值。

但是在这之前,我们首先需要弄大白property 和attributes的区别。attributes是你给html标签设置的一些属性值,这包罗你给一个标签设置的class、id甚至给输入框设定初始值一样。如果你没有在标签里面设置属性值但是却通过attr()来获取属性值, 会呈现undefined的情况。prop()同样是用来获取元素的属性值,但是与attr()有着明显的区此外是,即便没有在html标签中界说想要获取的属性,也能够正确的返回需要的当前的属性值。

按照官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。

为了直观的表现两者之间的不同,你可以再页面加载完成之后当即改变输入框的值,这时候你就会发明即便是你的输入框的值变革了,用attr()获取的属性值并不会随着文本的改变而改变,而通过property()来获取的属性值会随着文本框内容的变革而变革。

看一个例子,这里我们有一个设置了初始值的和一些attribute属性集的输入框:

代码如下:

<input type="text" id="mytextbox" value='set attribute value' />;

然后在jquery代码里我们这样写:

代码如下:

console.log('attribute value is : '+$('#mytextbox').attr('value'));

console.log('property value is : '+$('#mytextbox').prop('value'));

我们会发明,通过prop()来获取输入框里面的值永远都是和它里面的值同步的,而通过attr()老获取输入框里面的值一直都是在html标签里面设置的值。

代码如下:

$('input[type="button"]').click(function () {

alert('attribute value is : '+$('#mytextbox').attr('value'));

alert('property value is : '+$('#mytextbox').prop('value'));

});

使用 filter :checked

var ischecked = $('#mycheckbox:checked').length >; 0;

另外一种用于判断这个属性的值的要领是在选择元素的时候加上一个过滤器 :checked,然后按照所获得的元素的长度来判断元素的属性。但是这种用法并不推荐,因为当你的页面上有很多组复选框而且使用class选择器而不是id选择器的时候,所得到的答案可能是错误的。

代码如下:

$('input[type="button"]').click(function () {

if ($('#mycheckbox:checked').length >; 0 ) {

//change it to alert('its checked'); if you not working with console

console.log('its checked');

} else {

console.log('no its not checked');

}

});

我们能够看到,我们有好几种要领来获得复选款的选中属性。这也恰恰是web开发者常常需要用到而且在选择正确的使用方法时发生困惑的处所。

以上所述就是本文的全部内容了,但愿对各人学习javascript能够有所帮手。

请您花一点时间将文章分享给您的伴侣或者留下评论。我们将会由衷感谢您的支持!

以上是:解决javascript实现复选框选中属性问题的详细资料教程