jq 对表单的处理需求
一个表单中包含一个表格
//选中每行的复选框,判断该行中某列的输入数量合法,输出提示信息
//全选后,遍历每行,查看每行输入数据是否合法,输出提示信息
//有选中行,无错误提示,表单提交

怎么用jq实现实现这个需求呢??

3个回答

 <script type="text/javascript">
        $(function(){
            //全选
            $("input[name='both']").click(function(){

                var $isSelected = $(this).is(":checked");
                for(var i = 0;i<$("input[name='choice']").length;i++){
                    $("input[name='choice']")[i].checked = $isSelected;
                    }
                })

        });

        // 输入正确,且有选中该行复选框才提交
        function checkShopping(){
            $("#msg").html('');
            var $checkbox = $("input[name='choice']");
            var reg = /^[1-9]\d*$/;
            var $number = "";
            var isInteger = false;//记录数字是否正确
            var moreOne = false;//选择复选框个数

            $checkbox.each(function(){
                if($(this).is(":checked")){
                    $number = $(this).parent().prev().children().val();
                    if(reg.test($number)){
                        isInteger = true;
                        moreOne = true;
                    }else{
                        $("#msg").html('提示:输入数量必须为正整数');
                        isInteger = false;
                    }
                }
            })

            if(isInteger && moreOne){
                return true;
            }else if(!moreOne){
                $("#msg").html('提示:至少选择一条信息');
                return false;
            }else{
                return false;
            }
        }

</script>
 var ok=true;
$(':checkbox:checked').each(function(){
  var tr=$(this).closestr('tr')
    var input=tr.find('input');
    //..你的检查,不合法设置ok为false
})
if(!ok){alert('不符合!');return false}
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带数据验证和复选框的表单提交</title>
    <script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }
        td,th {
            width: 40px;
            height: 100px;
            border:1px solid #000;
        }
        table tbody tr:hover {
            background-color: red;
        }
        table tbody tr:not(:first-child):hover {background-color: #666;
        }
        td input[name='number']{
            width: 100px;
        }
    </style>
</head>
<body>
    <form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();">
        <table id="table" class="fl">
            <thead>
                <tr>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>购买数量</th>
                    <th><input id="both" type="checkbox" name="both" autocomplete="off"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>香蕉</td>
                    <td>100</td>
                    <td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td>
                    <td>
                        <input type="checkbox" name="choice" autocomplete="off">
                    </td>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>100</td>
                    <td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td>
                    <td>
                        <input type="checkbox" name="choice" autocomplete="off">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="submit" id="add_shopping" value="添加购物车"/>
    </form>
    <p id="msg"></p>
</body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问