您好,登錄后才能下訂單哦!
業(yè)務(wù)需求:可以根據(jù)checkbox的先后勾選傳遞有順序的值讓后臺接收,決定用tagsinput顯示checkbox的先后勾選順序,并實時響應(yīng)checkbox的勾選狀態(tài)
思路:checkbox的值存在一個數(shù)組A,新創(chuàng)建一個數(shù)組B,如果選中一個,B push一個值,取消一個,remove一個值,因為數(shù)組是有序的,就做到響應(yīng)checkbox的勾選順序
效果:
代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tagsinput Checkbox</title> <link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" > </head> <body> checkbox: <input type="checkbox" value="0" name="fruit" οnclick="radioHandle(this.value)" />Apple <input type="checkbox" value="1" name="fruit" οnclick="radioHandle(this.value)" />Banana <input type="checkbox" value="2" name="fruit" οnclick="radioHandle(this.value)" />Pear <input type="checkbox" value="3" name="fruit" οnclick="radioHandle(this.value)" />Orange <br><br> <input type="text" id="fruit-tags" name="fruit-tags" > <input type="text" id="fruitChecked"> <script src="jquery.min.js" ></script> <script src="jquery.tagsinput.js" ></script> <script type="text/javascript"> var fruitValue = new Array(); var fruitName = ['Apple','Banana','Pear','Orange']; Array.prototype.removeByValue = function(val) { for(var i=0; i<this.length; i++) { if(this[i] == val) { this.splice(i, 1); break; } } }; $('#fruit-tags').tagsInput({ interactive: false, removeWithBackspace: false, onRemoveTag: function(value){ //重點 通過值獲得數(shù)組的索引 //刪除 checkbox不勾選 數(shù)組remove值 顯示改變 var index = fruitName.indexOf(value); $("input:checkbox[name=fruit][value="+index+"]").prop("checked",false); fruitValue.removeByValue(index); $('#fruitChecked').val(fruitValue.toString()); } }); function radioHandle(value){ // --- 選中 push-- if($("input:checkbox[name=fruit][value="+value+"]").is(':checked')){ if($('#fruitChecked').val().indexOf(value) == -1){ fruitValue.push(value); $('#fruit-tags').addTag(fruitName[parseInt(value)]); } }else{ if($('#fruitChecked').val().indexOf(value) > -1){ fruitValue.removeByValue(value); $('#fruit-tags').removeTag(fruitName[parseInt(value)]); } } $('#fruitChecked').val(fruitValue.toString()); } </script> </body> </html>
參考:jQuery-Tags-Input
資源:Demo
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。