jquery,js,checkbox多选框复选框取值和赋值

今天一个同事不太会多选框的取值和赋值的问题,我帮他解决了一下,不想自己想的朋友可以参考一下。

获取checkBox的值,checkBox的html如下

<input type="checkbox" value="1" name="sProblem">check1
<input type="checkbox" value="2" name="sProblem">check2
<input type="checkbox" value="3" name="sProblem">check3
<input type="checkbox" value="4" name="sProblem">check4

获取选中的checkbox的val,并合成为一个字符串以逗号隔开。

function getTheCheckBoxValue(){
        var test = $("input[name=‘sProblem‘]:checked");
        var checkBoxValue = "";
        test.each(function(){
            checkBoxValue1 += $(this).val()+",";
        })
        checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);
设置传过来的checkbox的值并选中。传过来的是1,2,3,说明选中的是value为1,2,3的三个checkbox。如果前面不是123这种数字,是其他的字符也是支持的。
    function setTheCheckBoxValue(){
    var checkBox = "1,2,3";
    var checkBoxArray = checkBox.split(",");
    for(var i=0;i<checkBoxArray.length;i++){
    $("input[name=‘sProblem‘]").each(function(){
    if($(this).val()==checkBoxArray[i]){
    $(this).attr("checked","checked");
    }
    })
    }
    }
设置的这个方法是有缺陷的,如果checkbox过多不建议用,可以将each换成for循环来代替,减少无用的循环。

原文地址:https://www.cnblogs.com/Violety/p/9420161.html

时间: 2024-08-26 21:36:05

jquery,js,checkbox多选框复选框取值和赋值的相关文章

关于通过jq /js 实现验证单选框 复选框是否都有被选中

今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问题来了 得出来的值 怎么做判断的 ,到现在也没弄明白. 最后果断 用jq来实现,刚开始也是怎么都不行  最后发现clss的值被我写错了 哎 剁手! 好了 下面上jq 实现 验证 单选框 复选框有没有同时被选中: <div class="tab-stpp" id="tab-s

js操作复选框 复选框

//复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']"); if(tp==1){for(let i=0;i<all.length;i++){ all[i].checked=true; } }else{for(let i=0;i<all.length;i++){ all[i].checked=false; } } } js操作复选框.改变选中效果

Jq 复选框、单选框取值操作、面板切换、cook

今天遇到这么几个问题: 1.$().map(); map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象. 2 选择器(: >) :是指定type  :input <input>元素 .radio  type="radio"的元素3.$('div :checkbox').each(function (){}) 就是遍历 div获取的每个值5.Jq只能用一次,就哟不了-->(只能触发一次单击事件) 我的循环使用调用2.0估计就

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了

首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br> <input type="checkbox" name="hobby"value="足球"/>足球 <input type=&qu

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu