怎样判断一个input的type为checkbox的选中属性

怎样判断一个input的type为checkbox的选中属性,第1张

调用checkbox的checked属性 为false表示未选中;为true表示选中

不用再存入session了,直接用就可以的

像checkbox在form1表单中,名字叫checkboxname

你想知道这个checkbox是否被选中,

用formcheckboxnamechecked来判断 false表示未选中;true表示选中

下面这种方式也可以:

if($(input)is(":checked")){

alert(5);

}

试试这个。input必须是checkbox哟

<input type="checkbox" value="1111"/>1

<input type="checkbox" value="2222"/>2

<input type="checkbox" value="3333"/>3

<input type="checkbox" value="4444"/>4

<input type="checkbox" value="5555"/>5

<input type="checkbox" value="6666"/>6

<input type="button" id="test" value="Click Me"/>

<Script>

$(function(){

   $("#test")on("click",function(){

      var ichk=$("input:checkbox:checked")map(function(){

         return $(this)val();

      })get()join(",");

      alert(ichk);

   })

})

</Script>

获取 checkbox的 选中个数可以直接使用如下jquery语法$("input[type='checkbox']:checked")length;

示例如下:

创建Html代码及css样式

<div> 

<input type="checkbox" name="fruit"> apple

<input type="checkbox" name="fruit"> orange

<input type="checkbox" name="fruit"> banana

<input type="checkbox" name="fruit"> watermelon<br>

<input type="button" value="I like these fruit!">

</div>div{width:500px;padding:20px;border:4px solid #ebcbbe;}

input{margin:10px 5px;}

jquery代码

$(function(){

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

alert($("input[type='checkbox']:checked")length);

});

})

效果

<!DOCTYPE html>

<html>

  <head>

<meta >

举个例子,比如如下是HTML的结构:

这里推荐使用jQuery库,比较方便。以下是代码:

大致思路就是:先利用name属性值获取checkbox对象,然后循环判断checked属性。(true表示被选中,false表示未选中)

具体解释一下:

首先用documentgetElementsByName()这个方法,通过input标签的name属性将input元素获取,并存进obj这个变量值中。然后建一个check_val的数组,通过for循环将input标签的value值存入数组中,这样就可以获取checkbox的选中的多个值。

扩展资料:

Checkbox 对象代表一个 HTML 表单中的 一个选择框。

在 HTML 文档中 <input type="checkbox"> 每出现一次,Checkbox 对象就会被创建。

您可以通过遍历表单的 elements[] 数组来访问某个选择框,或者通过使用 documentgetElementById() 。

参考资料:

MDN—关于CheckBox属性

以上就是关于怎样判断一个input的type为checkbox的选中属性全部的内容,包括:怎样判断一个input的type为checkbox的选中属性、jquery怎么获取选中的checkbox的值、jquery 如何获取 checkbox的 选中个数等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9424918.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存