1. 程式人生 > >選中複選框 獲取複選框後面文字 顯示在div中 取消選中 則不顯示

選中複選框 獲取複選框後面文字 顯示在div中 取消選中 則不顯示

 <div class="am-form-group"  style="height: auto; width: 30%;">
                                        <label for="user-phone" class="am-u-sm-12 am-form-label am-text-left">評分項選擇 </label>
                                        <div class="am-u-sm-12  am-margin-top-xs">
                                        <div class="am-scrollable-vertical" >
                                          <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered">
                                            <thead>
                                                <th>選擇評分表</th>
                                                <th>評分表名稱</th>
                                            </thead>
                                            <tbody>
                                                <volist name="xm" id="xo">
                                                <tr>
                                                    <td><input type="checkbox" name="xmcode[{$xo.xmcode}]" class="checkbox" value="{$xo.xmcode}"></td>
                                                    <td>{$xo.xmname}</td> 
                                                </tr>
                                                </volist>
                                            </tbody>
                                          </table>
                                        </div>
                                            
                                        </div>


                                        </div> 
                                        <div class="am-scrollable-vertical xuanze" style="position: absolute;right: 18%;width: 50%; top: 58.5%; ">
                                              <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered ">
                                                <thead>
                                                    <th>已選評分項</th>
                                                    <th>設定最大分值</th>
                                                    <th>是否為一鍵否決項</th>
                                                </thead>
                                                <tbody id="tbody">
                                                </tbody>
                                              </table>
                                            </div>

------以上是表單---------------------------------

 var num=0;//定義一個全域性變數
    $(function(){
        $(".xuanze").hide();//頁面載入的時候隱藏div
    }); 

$(".checkbox").on('click',function(){

        var xmname = $(this). parent().next().text();//獲取點選複選框的文字
        if($(this).is(':checked'))//判斷複選框是否選中
        {   
            var str = '';
            str+= "<tr><td>"+xmname+"</td></tr>";//選中後拼接想要展示的資料
            $("#tbody").append(str);//在tbody裡面展示
            num=num+1;//選中讓全域性變數加一
        }
        else
        {
            num=num-1;//取消選中的時候 全域性變數減一 獲取tbody下所有的tr
            $("#tbody tr").each(function(){
                var text = $(this).children("td:first").text();//獲取tr中第一行td中的文字
                if(text==xmname)//判斷獲取到的文字
                {
                    $(this).remove();//相等的話刪除掉此行
                }
            })
        }
        if(num==0)//判斷定義的全域性變數是否
        {
            $(".xuanze").hide();//等於0隱藏
        }
        else
        {
            $(".xuanze").show();//不等於0的時候顯示
        }
    });

相關推薦

選中 獲取後面文字 顯示div 取消選中 顯示

 <div class="am-form-group"  style="height: auto; width: 30%;">                                         <label for="user-phone"

selenium+ java 下拉—— 獲取下拉選項的值

關鍵程式碼: //切換frame driver.switchTo ( ).frame ( "i" ); //根據元素定位找到select標籤 Select level = new Select ( driver.findElemen

angularjs 點事件獲取物件

<div class="provinceFont" data-ng-click="go($event)" ng-mouseenter="additemcss($event)" ng-mouseleave="removeitemcss($event)">{{y}}

C#文字獲取焦點後游標處於文字末尾

在一個窗體中如果窗體載入的時候,指定讓某個控制元件獲取焦點,比如是一個文字框TEXTBOX1,而TEXTBOX1有預設的文字內容,這個時候,窗體載入的時候,TEXTBOX1中的內容是被預設選中狀態的,必須滑鼠點選一次才能在末尾繼續新增內容,比如一串編號固定的前幾位,我們是可

checkbox標籤勾了但沒有checked=checked和checkbox標籤已有checked=checked但是顯示

checkbox標籤勾選了但沒有checked=checked這種情況需要自己建立一個選中事件<div class="keep-pwd">    <label>        <input type="checkbox" id="remLogin

手機的頁面數字顯示為電話號碼 和 點按鈕出現陰影和蘋果限制縮放

   <meta name="format-detection" content="telephone=no">    <style type="text/css">*{ -webkit-tap-highlight-color: rgba(0,0

動態給table增加獲取選中的資料

PS→無奈:失敗只是暫時停止成功,假如我不能,我就一定要;假如我要,我就一定能! html如下:  動態給以上table新增複選框,並且獲取選中資料的js如下: $(function(){ function initTableChec

[] 獲取checkbox選中的值

版權宣告 一、情景 我想獲取複選框下處於選中狀態下的 值,該複選框的name屬性:name="active"。 二、程式碼 1、html程式碼 <input type="checkbox"

jQuery操作checkbox技巧總結 ---- 設定選中取消選中獲取選中的值、判斷是否中等

jQuery操作複選框checkbox技巧總結 --- 設定選中、取消選中、獲取被選中的值、判斷是否選中等 一、checked屬性定義 先了解下input標籤的checked屬性: 1、HT

Jquery單、下拉動態設定預設項,及動態獲取選中項。

1.單選框Html程式碼: 女 男 <div class="col-sm-7"> <div class="rdio rdio-success col-sm-2">

jquery獲取input輸入的值、radio單選中的值、checkbox選中的值

1)jquery獲取input輸入框中的值 如何用jquery獲取<input id="test" name="test" type="text"/>中輸入的值? $(" #test ").val() $(" input[ name='test' ] ").va

jQuery如何獲取選中項後的文字

next() 獲得匹配元素集合中每個元素緊鄰的同胞元素。如果提供選擇器,則取回匹配該選擇器的下一個同胞元素。<script src="http://code.jquery.com/jquery.m

JavaBean獲取選中的內容

首先使用JavaScript方法獲取所有複選框選中內容,並組合為一個字串,該字串隨表單提交到伺服器,呼叫JavaBean方法將字串轉換為陣列,顯示在表格中。其中關鍵程式碼如下: 1.新建JavaB

JS和後臺獲取(checkbox)選中項後的文字內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

js獲取checkbox獲取選中的選項

var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; f

js 獲取選中的值

一 單選框的值 程式碼: $("input[type='radio']:checked").val() 二 獲取多選框的值: 思路:利用name屬性值獲取checkbox物件,然後迴圈判斷checked屬性(true表示被選中,false表示未選中)。 1、HTML

.html(),.text()和.val()的使用,獲取選中的值

本節內容主要介紹的是如何使用jQuery中的.html(),.text()和.val()三種方法,用於讀取,修改元素的html結構,元素的文字內容,以及表單元素的value值的方法。jQuery中 為我們提供了多種方法用於對元素的HTML結構和元素的文字內容的操作,比如說

Angular2可以使用的獲取(checkbox)的值的一種方法

樓主剛接觸angular2...需要實現一個checkbox,但是網上搜了很多資料都是angularJs的,基本不能通用,終於找到能用的方法,(不敢說合適),現在記錄如下: 樓主的checkbox是迴圈裡生成的,所以就以迴圈方法為例 如下是html程式碼,樓主的情景是勾選複選框框,然後批量刪

django通過json格式獲取值並處理,後臺返回json字串給前端

一、django通過json格式獲取複選框值並處理 1,前端程式碼 <div class="col-md-10 text-left"> {% for column in article_columns %} <label clas

vue elementyUI table :點一行時選中這一行對應的

<el-table @row-click="clickRow" ref="tb" :data="tbData"           @selection-change="handleSelectionChange">