用Javascript怎么获取 checkbox 所选中的行的、列的值

用Javascript怎么获取 checkbox 所选中的行的、列的值,第1张

我想你要用到后台吧,那么就不能仅仅停留在前端了。

建议你给每一行的checkbox加一个name属性,比如

<input

type='checkbox'

value='显示'

value='0'

name='ckb'

class='cls'>

<input

type='checkbox'

value='执行'

value='0'

name='ckb'

class='cls'>

<input

type='checkbox'

value='更新'

value='0'

name='ckb'

class='cls'>

值默认为0,在前台,当你选中某一个时,将其值改为1,js代码,需要用jquery

$(function(){

$("cls")click(function(){

thisvalue=1;

})

})

然后在后台用

RequestForm["ckb"]来接受checkbox的值,

就受到的值就例如这样

1

,0

,1

$(document)ready(function(){

var idsstr = "";

var isc = "";

$("#a input[name=chkId]")each(function(){ //遍历table里的全部checkbox

idsstr += $(this)val() + ","; //获取所有checkbox的值

if($(this)attr("checked")) //如果被选中

isc += $(this)val() + ","; //获取被选中的值

});

if(idsstrlength > 0) //如果获取到

idsstr = idsstrsubstring(0, idsstrlength - 1); //把最后一个逗号去掉

if(isclength > 0) //如果获取到

isc = iscsubstring(0, isclength - 1); //把最后一个逗号去掉

alert("所有checkbox的值:" + idsstr);

alert("被选中checkbox的值:" + isc);

});

类似这样:

<div id="divId" class="divTable">

<div class="tableBody">

<ul ><li ><input type="checkbox" value="501" ></li></ul>

</div>

</div>

$("input[type='checkbox']")attr('value')

返回结果:501

$("input[type='checkbox']")is(':checked')

返回结果:选中=true,未选中=false

把你所有的CheckBox都放在一个容器里,比如GroupBox

ArrayList arrChkInfo = new ArrayList();

foreach(CheckBox chk in GroupBox1Controls)

{

arrChkInfoAdd(chkSelectedValue);

}

//arrChkInfo就是所有的值了,你自己处理

Action里面:

private PromotionManageTo promotionManageTo;

private List<PromotionManageTo> productClass;

get…

set…

SqlMaps里面:

<select resultClass="promotionManagePromotionManageTo">

……

</select>

JSP里面:

<s:iterator value="productClass" status="productClassLength">

<td>

<input type="checkbox" name="promotionManageToproductId" value="<fs:property value="productId"/>" <c:if test="${fn:containsIgnoreCase(promotionManageToproductId, productId)}">checked="checked"</c:if> />

</td>

</s:iterator>

通常情况下,我们可能会用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是一个数组,用来放选中的itemname,当checkbox选中或者取消都会触发v-model绑定的checkedArr值变化;

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

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

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

protected void Page_Load(object sender, EventArgs e)

{

CheckBox chk = new CheckBox();

chkText = "testall"; // 这里可以换成数据库的内容

chkCheckedChanged += new EventHandler(chk_CheckedChanged);

chkAutoPostBack = true;

PageFormControlsAdd(chk);

for (int i = 0; i < 10; i++)

{

CheckBox chk2 = new CheckBox();

chk2Text = "test" + iToString(); // 这里可以换成数据库的内容

chk2Checked = (i % 3 == 0); // 这里可以换成数据库的内容

PageFormControlsAdd(chk2);

}

}

void chk_CheckedChanged(object sender, EventArgs e)

{

CheckBox all = sender as CheckBox;

foreach(Control ctl in PageFormControls)

{

if (ctl is CheckBox)

{

CheckBox chk = ctl as CheckBox;

chkChecked = allChecked;

}

}

}

以上就是关于用Javascript怎么获取 checkbox 所选中的行的、列的值全部的内容,包括:用Javascript怎么获取 checkbox 所选中的行的、列的值、checkbox选中怎么获取value值、jsp 怎么获取选中checkbox的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9456009.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存