Javascript实现复选框选中的属性

Javascript实现复选框选中的属性
熟悉Web前端开发的人知道判断复选框是否经常被选中。有很多方法来判断,但在发展的过程中,这些方法的相容性往往被忽视,但效果很好。之前的博客,有很多的方法,经常眉来眼去的一些坏坏的文章,混沌的回来。今天,我看到一个国外的博客,我认为这个解释是很好的,我想翻译中文,并加入了一些自己的看法。

如果你是从事网站开发和网页你开发有复选框,您可能需要确定复选框是否被选中,然后执行一些条件语句。有许多方法来确定是否选中复选框。

让我们先看看原生Javascript如何确定这个属性。在Javascript中,在选择一个元素之后,可以很容易地确定选中的复选框是否是选中的元素属性选中的复选框。

让我们举例,你页面上的复选框,复选框有一个独特的ID一看,如mycheckbox,如下所示:

复制代码代码如下所示:
现在我们首先通过Javascript选择元素,并获取它的选中属性。

复制代码代码如下所示:

功能checkcheckbox(){

如果(document.getelementbyid('mycheckbox)。检查){

/ /改变它提醒('its检查');如果你不使用控制

console.log('its检查);

{人}

console.log(没有不检查的);

}

}
如您所见,我们首先通过id选择这个元素,然后判断它的选中属性。如果选中复选框,它的值是真的。如果复选框未选中,其值将为false。

如果您使用jQuery,并且不想使用原生Javascript来实现此功能,那么有很多方法:

使用是(检查)

在这个用法中,你将使用jQuery的()函数。这个函数的功能是确定所选元素或元素集是否满足传递给函数的条件参数。如果条件匹配,返回true,否则返回false。

因此,为了使用这个函数,我们需要选择元素并检测选择器:选中的值,它适合复选框、单选按钮和选择标记。

{代码}

($输入{类型=按钮,单击)(函数(){

如果($(' # mycheckbox '),('检查')){

/ /改变它提醒('its检查');如果你不使用控制台

console.log('its检查);

{人}

console.log(没有不检查的);

}

});

{代码}

使用道具()

在jQuery1.6,功能属性()用于获取的元素的性质和属性,但它是一个疑问很容易。所以在jQuery1.6,一项新的功能,支持(),是用来获取的元素的当前属性值。

但在这之前,我们首先需要了解属性和属性之间的差异。属性的属性值,你设置的HTML标签,包括阶级、身份,甚至输入框的初始值,如果不设置属性值里面的标签,但你通过属性获得属性值(),未定义的情况会出现。道具()还可以用于获取元素的属性值,但它有从属性的明显差异()。即使在HTML标记中没有定义属性,它也可以正确返回所需的属性值。

根据官方的建议:用真假两属性的属性,如检查,选择,或禁用,使用道具(),和其他使用attr()。

为了反映两者之间的差异,然后你可以页面加载完成立即改变输入值,你会发现即使是箱变你的输入值,与属性()获取属性值,不随文本的变化而变化,和财产的获得()的价值将随着文本框内容的变化而变化。

例如,这里有一个输入框,它设置初始值和一些属性属性集:

复制代码代码如下所示:
然后我们在jQuery代码中编写:

复制代码代码如下所示:

console.log('attribute值+ $:(' # mytextbox)。Attr(币值的));

console.log(属性值+ $:(' # mytextbox)。道具(币值的));
我们会发现,通过道具(),在输入框的值总是与它的价值同步,并通过attr(),在输入框的值始终是建立在HTML标签。

复制代码代码如下所示:

($输入{类型=按钮,单击)(函数(){

警报('attribute值+ $:(' # mytextbox)。Attr(币值的));

警报(财产价值+ $:(' # mytextbox)。道具(币值的));

});
使用过滤器:检查

VAR系统=美元(# mycheckbox:检查长度> 0);

另一种方式来判断这个属性的值是添加一个过滤器来检查时,选择元素,然后判断元素的属性,根据元素的长度,但不推荐使用,因为当你在你的网页和使用类选择器多组复选框代替ID选择器,答案可能是错误的。

复制代码代码如下所示:

($输入{类型=按钮,单击)(函数(){

如果($(' # mycheckbox:检查')。长> 0){

/ /改变它提醒('its检查');如果你不使用控制台

console.log('its检查);

{人}

console.log(没有不检查的);

}

});
我们可以看到有几种方法可以获得再选的选定属性,这只是Web开发人员经常需要使用和使用正确方式的地方。

以上是本文的全部内容,希望能对您学习Javascript有所帮助。

请花些时间与朋友分享这篇文章,或者留下评论,我们要感谢你的支持!
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部