Js代碼中的span拼接問題解決

更新時(shí)間：2019年11月22日 09:37:00 作者：陽家坡

這篇文章主要介紹了Js代碼中的span拼接問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

今天遇到一個(gè)小需求，用bootstrap的table只有兩個(gè)字段，占用太寬，頁面不美觀，組長要求用拼接，一行幾列的形式展現(xiàn)出來。

我在form表單中拼接了span，遇到以下問題：

1.點(diǎn)擊查詢，以前生成的span不消失，新的拼接在后面

2.span中的復(fù)選框，值的取出，復(fù)選框的狀態(tài)更換

對(duì)于職場(chǎng)老手來說，這沒什么，但是js代碼沒接觸多久的我來說，只能撞墻尋出口，邊撞邊試。

我選擇的是遍歷form刪除，下面是代碼

$('span', form).each(function(){
  $(this).remove();
});
/*這里的form，我換成了$("#"+id)*/

------》對(duì)與復(fù)選框的取值

1）.復(fù)選框若是value,直接$(this).val();若是自定義,則是$(this).attr("name");比如

$('input[class="checkbox"]:checked').each(function(){
/*對(duì)于選中復(fù)選框的value取值*/
  $(this).val();
/*自定義取值*/$(this).attr("自定義的名字");
  });

2).復(fù)選框的狀態(tài)

對(duì)于全選用prop,prop() 方法設(shè)置或返回被選元素的屬性和值。全選、取消全選的事件使用prop可以避免版本迭代的bug，避免出現(xiàn)只能全選一次

function selectAll(){  
  if ($("input[name='ck']").prop("checked")) {     
    $("input[type='checkbox'][name='cks']").prop("checked",true);//全選
  } else {       
    $("input[type='checkbox'][name='cks']").prop("checked",false); //取消全選   
  } 
}

復(fù)選框就是根據(jù)checked的true或false改變狀態(tài)，在遍歷的選中復(fù)選框下，改變復(fù)選框?qū)ο髈bj.checked=false就改變了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

uni-app路由配置文件pages.json平臺(tái)化拆分
這篇文章主要為大家介紹了uni-app路由配置文件pages.json平臺(tái)化拆分示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
基于Javascript開發(fā)連連看游戲小程序
這篇文章主要介紹了基于Java開發(fā)連連看游戲小程序,連連看是在有限的時(shí)間內(nèi),只要把所有能連接的相同圖案,兩個(gè)一對(duì)地找出來,消除全部就成功了,文中提供了解決思路和部分實(shí)現(xiàn)代碼,需要的朋友可以參考下
2023-03-03
IE本地存儲(chǔ)userdata的一個(gè)bug說明
再一次項(xiàng)目上用到ie的userdata，考慮當(dāng)用戶不使用flash插件用于存儲(chǔ)一些聊天記錄
2010-07-07
JavaScript設(shè)計(jì)模式中的橋接和中介者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的橋接和中介者模式，橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式，而非繼承的設(shè)計(jì)模式，實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象，而中介者設(shè)計(jì)模式是指通過一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互
2022-06-06
淺析JS動(dòng)態(tài)創(chuàng)建元素【兩種方法】
下面小編就為大家?guī)硪黄獪\析JS動(dòng)態(tài)創(chuàng)建元素【兩種方法】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家。一起跟隨小編過來看看吧
2016-04-04
js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了js+SVG實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
提高網(wǎng)站信任度的技巧
網(wǎng)站信任度：一方面指瀏覽者對(duì)于站點(diǎn)的信任程度,另一方面指搜索引擎對(duì)于網(wǎng)站的信任值（TrustRank）,網(wǎng)站信任度對(duì)于企業(yè)站點(diǎn)更為重要.在得到更高信任度的同時(shí),流量更容易轉(zhuǎn)化為實(shí)在的收入.
2008-10-10
js計(jì)算最大公約數(shù)和最小公倍數(shù)代碼實(shí)例
這篇文章主要介紹了js計(jì)算最大公約數(shù)和最小公倍數(shù)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題，感興趣的朋友可以參考一下
2016-04-04
動(dòng)態(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獎(jiǎng)討B(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05