checkbox的value值（vue中如何获取选中的checkbox的value值）

本文目录

• vue中如何获取选中的checkbox的value值
• jquery怎么设置复选框的value值
• jquery 获取多个checkbox的value值
• 如何获取所有checkbox的value值
• 如何获取checkbox的value和name
• jQuery如何获取checkbox中的value值
• 如何在JSP对checkbox的value赋值

vue中如何获取选中的checkbox的value值

通常情况下，我们可能会用v-for循环出一堆checkbox，提交数据的时候需要去获取选中的checkbox的value值，之前我的获取方式是给checkbox添加点击事件，这样确实能解决问题，但是总觉得有更好的办法，因为同为form表单元素的文本框就可以使用v-model来实现数据双向绑定，难道checkbox不能实现数据双向绑定吗？

呵呵哒，真的可以，我一直都不知道。。。。。。。。。

《input  type="checkbox"  v-model="checkFlag"》

data () {

    return {

            checkFlag: true    //checkbox默认选中

    }

}

上面是最简单的用法，那如果使用场景是：购物车里循环遍历了所有用户添加的商品，用户选中一些商品，去结算，我们需要在结算的时候获取所有选中的checkbox的value值；

页面的大概效果如下：

这里我们给checkbox绑上了v-model的属性，以及value属性，checkedArr是一个数组，用来放选中的item.name，当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化；

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。

以下是依次选中四个商品，然后取消商品4，打印的checkedArr的值

至于全选按钮什么时候选中，那我们可以watch一下checkedArr：

jquery怎么设置复选框的value值

1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val() $("input::checked").val();
2、 获取多个checkbox选中项
$(’input:checkbox’).each(function() { 　　if($(this).attr(’checked’) ==true) { 　　alert($(this).val()); 　　} });
3、设置第一个checkbox 为选中值
$(’input:checkbox:first’).attr("checked",’checked’); $(’input:checkbox’).eq(0).attr("checked",’true’);
4、设置最后一个checkbox为选中值
$(’input:radio:last’).attr(’checked’, ’checked’); $(’input:radio:last’).attr(’checked’, ’true’);
5、根据索引值设置任意一个checkbox为选中值
$(’input:checkbox).eq(索引值).attr(’checked’, ’true’); 索引值=0,1,2.... 或者 $(’input:radio’).slice(1,2).attr(’checked’, ’true’);
6、选中多个checkbox同时选中第1个和第2个的checkbox
$(’input:radio’).slice(0,2).attr(’checked’,’true’);
7、根据Value值设置checkbox为选中值
$("input:checkbox").attr(’checked’,’true’);
8、删除Value=1的checkbox
$("input:checkbox").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();
索引值=0,1,2....如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$(’input:checkbox’).each(function(index, domEle) {//写入代码});
11、全部选中
$(’input:checkbox’).each(function() { $(this).attr(’checked’,true); });
12、全部取消选择
$(’input:checkbox’).each(function() { $(this).attr(’checked’,false); });
JQuery对CheckBox的一些相关操作
一、通过选择器选取CheckBox:
1.给CheckBox设置一个id属性，通过id选择器选取：
《input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /》 $("#chkOne").click(function(){});
2.给CheckBox设置一个class属性，通过类选择器选取：
《input type="checkbox" name="myBox" class="chkTwo" value="1" checked="checked" /》 $(".chkTwo").click(function(){});
3.通过标签选择器和属性选择器来选取：
《input type="checkbox" name="someBox" value="1" checked="checked" /》 《input type="checkbox" name="someBox" value="2" /》 $("input").click(function(){});
二、对CheckBox的操作：
以这段checkBox代码为例：
《inputtype="checkbox"name="box"value="0"checked="checked"/》《inputtype="checkbox"name="box"value="1"/》《inputtype="checkbox"name="box"value="2"/》《inputtype="checkbox"name="box"value="3"/》
1.遍历checkbox用each()方法：
$("input").each(function(){});
2.设置checkbox被选中用attr();方法：
$("input").attr("checked","checked");
在HTML中，如果一个复选框被选中，对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked"，所以判断 if("checked"==$("#id").attr("checked")) 是错误的，应该是 if(true == $("#id").attr("checked"))
3.获取被选中的checkbox的值：
$("input：checked").each(function(){if(true== $(this).attr("checked")) { alert( $(this).attr(’value’) ); }
$("input")能成功
4.获取未选中的checkbox的值：
$("input").each(function(){if($(this).attr(’checked’) ==false) { alert($(this).val()); } });
5.设置checkbox的value属性的值:
$(this).attr("value",值);
6。获取checkbox是否选中
$("input").is(’:checked’) 返回结果：选中=true，未选中=false
三、 一般都是创建一个js数组来存储遍历checkbox得到的值，创建js数组的方法：
1. var array= new Array();
2. 往数组添加数据：
array.push($(this).val());
3.数组以“,”分隔输出：
alert(array.join(’,’));

jquery 获取多个checkbox的value值

思路：利用name属性值获取checkbox对象，然后循环判断checked属性（true表示被选中，false表示未选中）。

1、HTML结构

《input type="checkbox" name="test" value="1"/》《span》1《/span》

《input type="checkbox" name="test" value="2"/》《span》2《/span》

《input type="checkbox" name="test" value="3"/》《span》3《/span》

《input type="checkbox" name="test" value="4"/》《span》4《/span》

《input type="checkbox" name="test" value="5"/》《span》5《/span》

《input type=’button’ value=’提交’ onclick="show()"/》

2、javascript代码：

function show(){

    obj = document.getElementsByName("test");

    check_val = ;

    for(k in obj){

        if(obj.checked)

            check_val.push(obj.value);

    }

    alert(check_val);

}

扩展资料

jQuery对checkbox的各种操作：

1、根据id获取checkbox：

$("#cbCheckbox1");

2、获取所有的checkbox：

$("input");//or

$("input");

3、获取所有选中的checkbox：

$("input:checkbox:checked");//or

$("input::checked");//or

$("input:checked");//or

$("input::checked")；

如何获取所有checkbox的value值

$(document).ready(function(){
var idsstr = "";
var isc = "";
$("#a input").each(function(){ //遍历table里的全部checkbox
idsstr += $(this).val() + ","; //获取所有checkbox的值
if($(this).attr("checked")) //如果被选中
isc += $(this).val() + ","; //获取被选中的值
});
if(idsstr.length 》 0) //如果获取到
idsstr = idsstr.substring(0, idsstr.length - 1); //把最后一个逗号去掉
if(isc.length 》 0) //如果获取到
isc = isc.substring(0, isc.length - 1); //把最后一个逗号去掉
alert("所有checkbox的值：" + idsstr);
alert("被选中checkbox的值：" + isc);
});

如何获取checkbox的value和name

1：如何获取checkbox的值和后面的中文名称
《input type=checkbox value="111"》《span》222《/span》
$("input:checked").each(function(){
$(this).next().html();
$(this).attr(’value’);
});
简单吧
2：通配符
$("input");//id属性以code开始的所有input标签
$("input");//id属性以code结束的所有input标签
$("input");//id属性包含code的所有input标签
匹配包含给定属性的元素 (大小写区分)
模糊匹配
不能是这个值
结尾是这个值
开头是这个值
... 匹配多个属性条件中的一个

jQuery如何获取checkbox中的value值

大体思路就是把你要的checkbox的元素遍历一下，然后取当前的value值，要使用jq内置的val()方法，代码如下：
《form onsubmit="return false;"》
《input type="checkbox" value="三人行慕课1(3mooc.com)" name="check"》三人行慕课1《/input》
《input type="checkbox" value="三人行慕课2(3mooc.com)" name="check"》三人行慕课2《/input》
《input type="checkbox" value="三人行慕课3(3mooc.com)" name="check"》三人行慕课3《/input》
《input type="checkbox" value="三人行慕课4(3mooc.com)" name="check"》三人行慕课4《/input》
《input type="checkbox" value="三人行慕课5(3mooc.com)" name="check"》三人行慕课5《/input》
《button》选中是谁《/button》
《/form》
《script src="引入jquery.js"》《/script》《script type="text/javascript"》$(function(){ $("button").click(function(){ $.each($(’input:checkbox:checked’),function(){ console.log( $(this).val() ); }); })})《/script》

如何在JSP对checkbox的value赋值

//效果是，点击checkbox的选择框，会赋值给checkbox，赋予的值是自己定义的，可以是变量
var input = function(){
$("input").click(function(){
var str = "a";
$("input").val(str);//此处想怎么赋值就怎么赋值
})
}
使用前提是引入jQuery的包