首页 新闻 搜索 专区 学院

checkbox的checked值

0
悬赏园豆:10 [已解决问题] 解决于 2016-12-05 14:36

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>checked</title>
<script type="text/javascript" src='jquery-2.2.0.min.js'></script>
</head>
<body>
<input type='checkbox' id='input'>
</body>
<script type="text/javascript">
$('input').click(function(){
console.log($('#input').checked)

})

</script

为什么我不管这个复选框有没有选中 打印出来的都是undefined呀?选中的时候不是应该打印true么?求指教?怎么才能监听checkbox有没有选中呢?

改吧的主页 改吧 | 初学一级 | 园豆:104
提问于:2016-12-05 11:09
< >
分享
最佳答案
0

$('#input').get(0)或者$('#input')[0]

收获园豆:5
hellohello-tom | 初学一级 |园豆:129 | 2016-12-05 11:14

除了这种方法呢?这样的话要是页面上有多个checkbox框怎么办呢?

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:16

@小码农雯: 你的多个checkbox,他们用的id不一样.有多个的时候可以遍历

老徐想减肥 | 园豆:213 (菜鸟二级) | 2016-12-05 11:18

@小码农雯: 那就是你选择器,选的问题了。多个checkbox 的话可以 $(":checked").each遍历,多看看jquery api文档, 很多问题在api中就能找到答案

hellohello-tom | 园豆:129 (初学一级) | 2016-12-05 11:21

@小徐只是个搬砖的: 能demo一个看看么?

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>checked</title>
    <script type="text/javascript" src='jquery-2.2.0.min.js'></script>
</head>
<body>
<form>
<input type='checkbox' >
<input type='checkbox' >
<input type='checkbox' >
<input type='checkbox' >
<input type='checkbox' >
    </form>
</body>
<script type="text/javascript">

    
</script>
</html>
改吧 | 园豆:104 (初学一级) | 2016-12-05 11:21

@_tom: 可是遍历的话就没有触发事件了哇

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:22

@小码农雯: 你现在最终的想要实现什么功能?

hellohello-tom | 园豆:129 (初学一级) | 2016-12-05 11:23

@_tom: 一开始是checkbox的原始状态,然后我在页面上选中几个checkbox,然后我想拿到这几个选中的checkbox

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:24

@小码农雯: $(":checkbox")

这就是拿到所有的选中的checkbox

hellohello-tom | 园豆:129 (初学一级) | 2016-12-05 11:26

@_tom: 恩 但是我只想拿到checked的那几个checkbox

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:26

@小码农雯: $("input:checked")

hellohello-tom | 园豆:129 (初学一级) | 2016-12-05 11:32

@_tom: 这个只能拿到页面上初始状态是checked的checkbox,但是我现在是初始状态都是没有选中的,是用户自己选中然后我来监听用户选中了那几个checkbox 是这样的

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:34

@小码农雯: 

你结合一下$('input:checked')

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>checked</title>
    <script type="text/javascript" src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script>
</head>
<body>
<form>
<input id="checkbox1" type='checkbox' >
<input id="checkbox2" type='checkbox' >
<input id="checkbox3" type='checkbox' >
<input id="checkbox4" type='checkbox' >
<input id="checkbox5" type='checkbox' >
    </form>
</body>
<script type="text/javascript">

    $(":checkbox").on("change",function(){
        var $checkbox = $(this);
        console.log($checkbox.attr('id'));
    });
</script>
</html

hellohello-tom | 园豆:129 (初学一级) | 2016-12-05 11:38

@_tom: 感谢感谢

改吧 | 园豆:104 (初学一级) | 2016-12-05 11:40
其他回答(6)
0

这是jQuery的对象,

console.log($('#input')[0].checked)

试试

 

老徐想减肥 | 园豆:213 (菜鸟二级) | 2016-12-05 11:17

这样的话我页面上有多个checkbox就不好使了 我要是页面上有多个checkbox,然后我想监听里面哪几个checkbox是选中状态

 

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:18

@小码农雯: 你要的监听是怎么监听,是每个checkbox 每选中一次都响应一下还是怎样

还是 在特定的响应方法中获取有checkbox的checked状态?

支持(0) 反对(0) 老徐想减肥 | 园豆:213 (菜鸟二级) | 2016-12-05 11:22

@小徐只是个搬砖的: 就是页面上有几个checkbox 然后你随便在页面上选中几个 然后就是监听到是哪几个checkbox是选中状态 这样子

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:23
0

$('#input').click(function(){
console.log($('#input').attr('checked'))

}

用attr 或prop试试吧,本人没测试过

收获园豆:3
让我发会呆 | 园豆:2638 (老鸟四级) | 2016-12-05 11:22

是的 用prop()是有效的 谢谢

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:41

@小码农雯: 那就好,一般这种问题直接找前端工程师就行了,哈哈……

支持(0) 反对(0) 让我发会呆 | 园豆:2638 (老鸟四级) | 2016-12-05 11:44

@让我发会呆: 哈哈 所以就来这里找前端工程师了

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:46

@小码农雯: 其实我是后台开发 = =!

支持(0) 反对(0) 让我发会呆 | 园豆:2638 (老鸟四级) | 2016-12-05 11:49
0

$("input[type=checkbox]").each(function () {
console.log($(this)[0].checked);

})

相忘江湖何处去 | 园豆:140 (初学一级) | 2016-12-05 11:37
0

<input type='checkbox' name='mes' value='1'/>
<input type='checkbox' name='mes' value='2'/>
<input type='checkbox' name='mes' value='3'/>
<input type='checkbox' name='mes' value='4'/>
<input type="button" id="sub" />

 

$("input:button").click(function () {
text = $("input:checkbox[name='mes']:checked").map(function (index, elem) {
return $(elem).val();
}).get().join(',');

});
$("#sub").click(function () {
console.log(text);
})

 

最后打印出来的就是你选中的值。

收获园豆:2
尚公子 | 园豆:230 (菜鸟二级) | 2016-12-05 11:37

谢谢 感谢

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:45
0

是否选中,建议用$("").prop("checked")


Jeffcky | 园豆:2589 (老鸟四级) | 2016-12-05 11:37

谢谢

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:44
0

要做全选功能?

顾晓北 | 园豆:10257 (专家六级) | 2016-12-05 11:49

哦 不是  是监听页面的checkbox与哪些是checked

支持(0) 反对(0) 改吧 | 园豆:104 (初学一级) | 2016-12-05 11:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册