Bootstrap Snippet custom Checkboxes create using jquery and css using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
    <title>Tags</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    
</head>
<body>
    
    
    
    <div class="container">
        <ul class="list-unstyled row teaxhead">
            
            <li class="col-md-6 col-12 custom-control custom-checkbox mb-4" id="Pre-war_content">
               <input type="checkbox" class="custom-control-input" id="customCheck_Prewar">
               <label class="custom-control-label" for="customCheck_Prewar">Pre-war</label>
            </li>
            <li class="col-md-6 col-12 custom-control custom-checkbox mb-4" id="Post-war_content">
               <input type="checkbox" class="custom-control-input" id="customCheck_Postwar">
               <label class="custom-control-label" for="customCheck_Postwar">Post-war</label>
            </li>
        </ul>
        <ul class="list-unstyled row">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*body{*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/
/*.textbox{*/
/*  width: 400px;*/
/*  height: 200px;*/
/*  margin: 10px auto;*/
/*  border: 1px solid #ccc;*/
/*  background-color: aliceblue;*/
/*  padding: 3px;*/
/*}*/
/*.teaxhead{*/
/*  width: 100%;*/
/*  height: 222px;*/
/*  border-bottom:  1px solid #ccc; */
/*    padding: 12px 5px;*/
/*    background-color: beige;*/
/*}*/
/*input#inputTag {*/
/*    width: 70%;*/
/*    float: left;*/
/*    height: 40px;*/
/*    margin: 2px;*/
/*}*/
 .button{
    width: 27%;
    float: left;
    background: #5980d6;
    height: 45px;
    margin: 2px;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 27px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
     
    var arr = [];
     $(document.body).on('click', '.button', function(event) {
        event.preventDefault();
        /* Act on the event */
        let inputbox = $('#inputTag');
        let teaxhead = $('.teaxhead');
        let tagName = inputbox.val();
        if (tagName == "" || tagName == null) {
            alert('Please Enter  the text ');
            return false;
        }else{ 
              
            let i=0;
            for(tag in arr){
                if (arr[tag]==tagName) {
                    alert("This  tag already Exits");
                    i++;
                }
            }
            if (i==0) {
                arr.push(tagName);
                AddTag(tagName,inputbox,teaxhead,i);
            }
            
        }
     });
});
 
var AddTag = function(tags,inputbox,teaxhead,i){
    //let Tag = '<span class="tags magia '+sucess()+'" id="'+tags+'">'+tags+' <span class="tagsclose" data-pid="'+tags+'" >×</span></span>';
    let Tag = '<li class="col-md-6 col-12 custom-control custom-checkbox mb-4 '+sucess()+'" id="'+tags+'_content"><input type="checkbox" class="custom-control-input" id="customCheck_'+tags+'"><label class="custom-control-label" for="customCheck_'+tags+'">'+tags+'</label><span class="tagsclose" data-pid="'+tags+'_content" >×</span></span></li>';
    inputbox.val('');
    teaxhead.append(Tag);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"custom Checkboxes create using jquery and css"
Bootstrap 4.1.1 Snippet by sergiodibujo

Related: See More

Questions / Comments:

"custom Checkboxes create using jquery and css" Bootstrap 4.1.1 Snippet by sergiodibujo

Related: See More

Questions / Comments:

"custom Checkboxes create using jquery and css"
Bootstrap 4.1.1 Snippet by sergiodibujo