全选或者单选checkbox的值动态添加到div
生活随笔
收集整理的這篇文章主要介紹了
全选或者单选checkbox的值动态添加到div
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圖片.png <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="./css/bootstrap.css" /><style>html,body{width:100%}.bg_gray{background-color: #F1F1F1;font-size:14px;height:28px;line-height: 28px;}.container{width:500px;border: 1px solid #000;}.lead{border: 1px solid #f1f1f1;height:40px;margin-top:10px;}.breadcrumb{background-color: #fff;}</style></head><body><div class="container"><div class="row bg_gray"><div class="col-xs-6">選擇部門</div><div class="col-xs-6 text-right">×</div></div><p class="lead"></p><div class="row"><ol class="breadcrumb"><li><a href="#">華東師范大學>經管學部</a></li></ol></div><ul class="list-group"><li class="list-group-item"><div class="row"><div class="col-xs-6"><input type="checkbox" name="check_all" />全選</div><div class="col-xs-6 text-right">5></div></div></li><li class="list-group-item"><div class="row"><div class="col-xs-5 col-xs-offset-1"><input type="checkbox" name="check" onclick="getCheck()"/>經濟學院</div><div class="col-xs-6 text-right">5></div></li><li class="list-group-item"><div class="row"><div class="col-xs-5 col-xs-offset-1"><input type="checkbox" name="check" onclick="getCheck()"/>MBA教育學院</div><div class="col-xs-6 text-right">5></div></li></ul><div class="row"><div class="col-xs-6 text-center"><button class="btn btn-default btn-lg">取消</button></div><div class="col-xs-6 text-center"><button class="btn btn-info btn-lg">確定</button></div></div></div></body><script src="js/jquery.js"></script><script>$("[name=check]").on("change",function(){var vl = $.trim($(this).parent().text())var val = $('<button type="button" class="btn btn-info btn-sm">'+vl+'</button>')if($(this).is(":checked")){if($("button:contains("+vl+")").length==0){$(".lead").append(val)}}else{$("button:contains("+vl+")").remove()}})$("[name=check_all]").on("change",function(){if($(this).is(":checked")){$.map($("[name=check]"),function(val,index){$(val).attr("checked","checked")$("[name=check]").eq(index).trigger("change")})}else{$.map($("[name=check]"),function(val,index){$(val).removeAttr("checked")$("[name=check]").eq(index).trigger("change")})}})function getCheck(){var flag=1;$.map($("[name=check]"),function(val,index){if(!$(val).is(":checked")){flag=0;}})if(!flag){$("[name=check_all]").removeAttr("checked")}else{$("[name=check_all]").attr("checked","checked")}}</script>
</html>
原文作者：祈澈姑娘
技術博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
文末福利：關注「編程微刊」公眾號 ，在微信后臺回復「領取資源」，獲取IT資源200G干貨大全。公眾號回復“1”，拉你進程序員技術討論群
轉載于:https://www.cnblogs.com/wangting888/p/9702167.html
總結
以上是生活随笔為你收集整理的全选或者单选checkbox的值动态添加到div的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mysql 解压版 安装时候的注意事项
- 下一篇： 转Linux环境下段错误的产生原因及调试