jquery如何选中或取消checkbox并同时把值传到父窗口?

再给个去重复正则alert( "0,1,2,11223f,1,2".match(/(\b\w+(?:\w+)?\b)(?!.*,\1\b)/g) )

我现在在是采取每次点击就重新遍历取值,然后赋值的方式,代码如下:
<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <title>checked demo</title>
  <style>
div {
color: red;
}
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
<form>
    <p>
    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
  </p>
  </form>
<div>
    <input type='text' value=''  id='dangwei' size="66">
  </div>
<script>
var countChecked = function() {
    var s='';
  $('input[name="newsletter"]:checked').each(function(){
    s+=$(this).val()+',';
  });
// alert(s);
  $( "#dangwei" ).attr("value",s);
};countChecked();

$( "input[type=checkbox]" ).on( "click", countChecked );</script></body>
</html>但是在一楼就说过了,由于存在翻页点选的问题,这种每次都重新遍历的方法显然不行,怎样在取消勾选的时候只删除那个元素而不是全部重新遍历啊?

你翻页不是在子窗口？
父窗口中，'ji' 的值不是一直保存着，不管有没有翻页是吧
<input type='text' name='计量单位' value='002,004' readonly id='ji' >
比如: ji='002,004' ,
子窗口中选择了 001 时ji='002,004' +',001'
选择了 001,002 时ji='002,004' +',001,002' 再把重复的002 去掉
这不我理解的对不对

我现在采用4楼这个笨办法,就是每个页面点选之后,统计出当前页面的checkbox选中值,并且让用户去点击一下确定,把这个页面的选中集合添加到汇总的页面中的那个集合中去,然后翻页继续操作.这样做的好处是我就不用在考虑这个取消勾选之后删除字符串的问题了,但是这样的话操作起来比较麻烦,每次翻页之前都要专门点击一下当前也的确定按钮.

你翻页不是在子窗口？
父窗口中，'ji' 的值不是一直保存着，不管有没有翻页是吧
<input type='text' name='计量单位' value='002,004' readonly  id='ji' >
比如: ji='002,004' ,
子窗口中选择了 001 时ji='002,004' +',001'
选择了 001,002 时ji='002,004' +',001,002' 再把重复的002 去掉
这不我理解的对不对

翻页是在iframe中,而汇总值的那个<input type='text' name='计量单位' value='002,004' readonly  id='ji' >位于父窗体中,我4楼那个是测试用的,都写在同一个页面中了,没有iframe.  确实如你所说,父窗口中，'ji' 的值是一直保存着，不管有没有翻页

我现在的代码如下:<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>checked demo</title>
<style>
div {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form>
<p>
<input type="checkbox" name="newsletter" value="Hourly" checked="checked"> <input type="checkbox" name="newsletter" value="Daily"> <input type="checkbox" name="newsletter" value="Weekly"> <input type="checkbox" name="newsletter" value="Monthly" checked> <input type="checkbox" name="newsletter" value="Yearly">
</p>
</form>
<div>
这个是每页的checkbox汇总,位于iframe中
<input type='text' value='' id='perPage' size="66">
</div>
<script>
var countChecked = function() {
var s = '';
$('input[name="newsletter"]:checked').each(function() {
s += $(this).val() + ',';
});
// alert(s);
$("#perPage").attr("value", s);
}; countChecked(); $("input[type=checkbox]").on("click", countChecked); function copySelVal() {
var perPageVal = $("#perPage").val();
var totalpageVal = $("#totalpage").val();
$("#totalpage").val(totalpageVal + "," + perPageVal);
}
</script>
这个是所有页的checkbox汇总,位于父窗体
<input type="text" value='' id='totalpage' size="66"><br>
<input type="button" value='每次翻页之前点击一下这个按钮把当前页的checkbox汇总值传送到total那个button' onClick="copySelVal();"></body>
</html>

我写了个简单的例子你参考一下，你把 ji 换成父页面的对象就行了
你翻页不是在子窗口？
父窗口中，'ji' 的值不是一直保存着，不管有没有翻页是吧
<input type='text' name='计量单位' value='002,004' readonly  id='ji' >
比如: ji='002,004' ,
子窗口中选择了 001 时ji='002,004' +',001'
选择了 001,002 时ji='002,004' +',001,002' 再把重复的002 去掉
这不我理解的对不对

翻页是在iframe中,而汇总值的那个<input type='text' name='计量单位' value='002,004' readonly  id='ji' >位于父窗体中,我4楼那个是测试用的,都写在同一个页面中了,没有iframe.  确实如你所说,父窗口中，'ji' 的值是一直保存着，不管有没有翻页

    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
<input type="type" name="newsletter" id="ji" readonly=true  value="Hourly,Monthly"   />

<script src="http://code.jquery.com/jquery-1.4.1.min.js"> </script>
<script>
$(':checkbox[name=newsletter]').click(function(){
var vs=$('#ji').val().split(',');
var i=$.inArray(this.value,vs);
if(this.checked  ){
if(i==-1)vs.push(this.value) ;
}else{
if(i!=-1) vs.splice(i,1);
}
$('#ji').val( vs );

})

</script>

你翻页不是在子窗口？
父窗口中，'ji' 的值不是一直保存着，不管有没有翻页是吧
<input type='text' name='计量单位' value='002,004' readonly  id='ji' >
比如: ji='002,004' ,
子窗口中选择了 001 时ji='002,004' +',001'
选择了 001,002 时ji='002,004' +',001,002' 再把重复的002 去掉
这不我理解的对不对

翻页是在iframe中,而汇总值的那个<input type='text' name='计量单位' value='002,004' readonly  id='ji' >位于父窗体中,我4楼那个是测试用的,都写在同一个页面中了,没有iframe.  确实如你所说,父窗口中，'ji' 的值是一直保存着，不管有没有翻页

    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
<input type="type" name="newsletter" id="ji" readonly=true  value="Hourly,Monthly"   />

<script src="http://code.jquery.com/jquery-1.4.1.min.js"> </script>
<script>
$(':checkbox[name=newsletter]').click(function(){
var vs=$('#ji').val().split(',');
var i=$.inArray(this.value,vs);
if(this.checked  ){
if(i==-1)vs.push(this.value) ;
}else{
if(i!=-1) vs.splice(i,1);
}
$('#ji').val( vs );

})

</script>
你这个是去重的吗? 怎样添加到我9楼的代码中啊? 我试了一下不行,不知道怎样调用你这段代码.
我要去重的是id='totalpage'那个input中的数据

你翻页不是在子窗口？
父窗口中，'ji' 的值不是一直保存着，不管有没有翻页是吧
<input type='text' name='计量单位' value='002,004' readonly  id='ji' >
比如: ji='002,004' ,
子窗口中选择了 001 时ji='002,004' +',001'
选择了 001,002 时ji='002,004' +',001,002' 再把重复的002 去掉
这不我理解的对不对

翻页是在iframe中,而汇总值的那个<input type='text' name='计量单位' value='002,004' readonly  id='ji' >位于父窗体中,我4楼那个是测试用的,都写在同一个页面中了,没有iframe.  确实如你所说,父窗口中，'ji' 的值是一直保存着，不管有没有翻页

    <input type="checkbox" name="newsletter" value="Hourly" checked="checked">
    <input type="checkbox" name="newsletter" value="Daily">
    <input type="checkbox" name="newsletter" value="Weekly">
    <input type="checkbox" name="newsletter" value="Monthly" checked>
    <input type="checkbox" name="newsletter" value="Yearly">
<input type="type" name="newsletter" id="ji" readonly=true  value="Hourly,Monthly"   />

<script src="http://code.jquery.com/jquery-1.4.1.min.js"> </script>
<script>
$(':checkbox[name=newsletter]').click(function(){
var vs=$('#ji').val().split(',');
var i=$.inArray(this.value,vs);
if(this.checked  ){
if(i==-1)vs.push(this.value) ;
}else{
if(i!=-1) vs.splice(i,1);
}
$('#ji').val( vs );

})

</script>
谢谢,先下了,晚上回来研究,

我按你9楼的代码上改的
我是每点一下 checkBox, 就更新父页面的值
考虑翻页回上页面恢复选中过的，加了载原值功能
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>checked demo</title>
<style>
div {
    color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

    <form>
        <p>
            <input type="checkbox" name="newsletter" value="Hourly" >
            <input type="checkbox" name="newsletter" value="Daily">
            <input type="checkbox" name="newsletter" value="Weekly">
            <input type="checkbox" name="newsletter" value="Monthly"  >
            <input type="checkbox" name="newsletter" value="Yearly">
        </p>

    </form>
    <div>
     
    </div>
    <script>

$(function(){
var totalpage = $("#totalpage");  //父级页面对象
//把原来选中的补上
var oldVs=totalpage.val().split(',');
$(':checkbox[name=newsletter]').each(function(){
if( $.inArray( this.value,oldVs )!=-1) this.checked=true;
})

//$(totalpage.val().split(',')).each( );


$(':checkbox[name=newsletter]').click(function(){
var vs=totalpage.val().split(',');
var i=$.inArray(this.value,vs);
if(this.checked  ){
if(i==-1)vs.push(this.value) ;
}else if(i!=-1){
vs.splice(i,1);
}
vs[0]||vs.shift();
totalpage.val(vs);
})
})

</script>
    这个是所有页的checkbox汇总,位于父窗体,初始值为 Hourly,Weekly
    <input type="text" value='Hourly,Weekly' id='totalpage' size="66"><br>
    这不用每次翻页之前再去取了，因为每次，点击checkBOx 时就更新了
    
<script>
</script></body>
</html>

调试易

jquery如何选中或取消checkbox并同时把值传到父窗口?

解决方案 »