復選框

周國輝發布于2019-08-16 15:44 / 1715人閱讀

摘要：批量新增和刪除的時候如何判斷是否有至少選中一條數據用于批量獲取已選的復選框驗證返回所有選擇的行，當沒有選擇的記錄時，返回一個空數組請至少選擇一條供應商操作成功。

【1】批量新增和刪除的時候如何判斷是否有至少選中一條數據

$("#add").click(function(){
    //用于批量（獲取已選的復選框）
    var test = $("input[name="btSelectItem"]:checked");
    var checkBoxValue = ""; 
    test.each(function(){
        checkBoxValue += $(this).val()+",";
    })
    checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);
    
    // todo 驗證
    var rows = $("#exampleTable").bootstrapTable("getSelections"); // 返回所有選擇的行，當沒有選擇的記錄時，返回一個空數組
    if (rows.length == 0) {
        toastr.error("請至少選擇一條供應商");
        return;
    }else{
        var typeid = $("#typeid").val(); 
        $.ajax({
            cache : true,
            type : "POST",
            url : "/base/supSupt/save?typeid="+typeid +"&ids=" + encodeURIComponent(checkBoxValue),
            data : null,
            async : true,
            error : function(request) {
                toastr.error("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    toastr.success("操作成功。");
                    $("#modal-addSup").modal("hide");
                    //refreshsupdetails();
                    window.open();
                } else {
                    toastr.error(data.msg);
                }
            }
        });
    }
})

【2】表單的話選擇下面這種

采用bootstrap官方的寫法
$("#add").click(function(){
    var rows = $("#exampleTable").bootstrapTable("getSelections"); // 返回所有選擇的行，當沒有選擇的記錄時，返回一個空數組
    if (rows.length == 0) {
        toastr.error("請選擇要添加的供應商");
        return;
    }else{
        var ids = new Array();
        $.each(rows, function(i, row) {
          ids[i] = row["id"];
        });
        console.log(ids);
        $.ajax({
            type : "POST",
            data : {
                "ids" : ids
            },
            url : "/base/supSupt/save?typeid="+$("#typeid").val(),
            success : function(r) {
                if (r.code == 0) {
                    toastr.success(r.msg);
                    window.open();
                } else {
                    toastr.error(r.msg);
                }
            }
        });
     }
})

后臺代碼：
/**
 * 保存
 */
@ResponseBody
@PostMapping("/save")
@RequiresPermissions("base:supSupt:add")
public R save( SupSuptDO supSupt,Model model, @RequestParam("typeid") String typeid, @RequestParam("ids[]") String[] ids){
    //將拿到的ids（就是供應商的id=supid）按逗號進行分割成數組
    int i = 0;
    for (String supid : ids) {
        i++;
        String uuid = UUID.randomUUID().toString().replace("-", "");
        supSupt.setToid(uuid);
        supSupt.setTypeid(typeid);
        supSupt.setSupid(supid);
        if(supSuptService.save(supSupt)>0){
            if(ids.length == i){
                return R.ok();
            }else{
                continue;
            }
        }else{
            return R.error();
        }
    }
    return R.error();
}

【3】復選框的全選和禁止全選

//html：

    
         
    


js腳本：
$(".group-checkable").click(function(event) {
    $(this).toggleClass("checkboxes");
    var isChecked = $(".group-checkable").prop("checked");
    if(isChecked) {
        $("input[name="ids"]").prop("checked", true);
    } else {
        $("input[name="ids"]").prop("checked", false);
    }
});

==tips==：因為這個復選框是要提交的，所以要在表單中添加from表單，然后$("#表單id").serialize();自然傳輸到后臺即可拿到對應id數組

【4】注意：

可以將數組放到FromData中；

可以將數組放到路由中；

也可以在dto中聲明數組變量，然后頁面就是數組名

var bidfiletypeids = new Array(); //定義一數組
bidfiletypeids = checkBoxValue.split(","); //字符分割

云服務器 GPU云服務器復選框選中復選框點擊復選框復選框按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/73674.html

CSS3結合fontawesome字體實現自定義單選框復選框效果

摘要：經常能看到別人做前端的時候，實現一些漂亮的復選框或單選框按鈕，由于現在項目原因，很多單選框和復選框看起來很不好看，于是，心血來潮打算自己實現了一遍。經常能看到別人做前端的時候，實現一些漂亮的復選框或單選框按鈕，由于現在項目原因，很多單選框和復選框看起來很不好看，于是，心血來潮打算自己實現了一遍。一、首先上css代碼：其中，說明我以注釋的形式寫到里面；關于z-index我是基于...

hover_lew 2019-08-20 12:35 評論0 收藏0
【譯】HTML表單高級樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

caikeal 2019-08-29 10:59 評論0 收藏0
【譯】HTML表單高級樣式

摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。系列文章說明原文在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

Jacendfeng 2019-08-01 15:29 評論0 收藏0
Java窗口（JFrame）從零開始（6）——單選按鈕+復選框

單選按鈕+復選框單選按鈕、復選框是什么這個都知道，不做解釋。上代碼（自己寫著玩的，排班不太好）package jframe;import java.awt.BorderLayout;import java.awt.Container;import java.awt.FlowLayout;import java.awt.event.ActionEvent;import java.awt.event...

youkede 2019-08-16 10:33 評論0 收藏0
JS基礎入門篇（四）—this的使用，模擬單選框，選項卡和復選框

摘要：建立索引，記錄每一個節點值。選項卡模擬選項卡方法一大清洗，在設置顏色之前把所有的顏色值設為空。宋體選項卡一選項卡二選項卡三內容一內容二內容三方法二點擊什么，清除什么。 1.this的使用 this js中的關鍵字 js內部已經定義好了,可以不聲明直接使用 this的指向問題 1. 在函數外部使用 this指向的是window 2...

tanglijun 2019-08-22 17:14 評論0 收藏0
JS基礎入門篇（四）—this的使用，模擬單選框，選項卡和復選框

摘要：建立索引，記錄每一個節點值。選項卡模擬選項卡方法一大清洗，在設置顏色之前把所有的顏色值設為空。宋體選項卡一選項卡二選項卡三內容一內容二內容三方法二點擊什么，清除什么。 1.this的使用 this js中的關鍵字 js內部已經定義好了,可以不聲明直接使用 this的指向問題 1. 在函數外部使用 this指向的是window 2...

hot_pot_Leo 2019-08-29 15:23 評論0 收藏0