How to add Checkbox in Shopify Cart Page

 IF you want to add 3 checkboxes on the Shopify cart page this code will help you to short out things.

Add  Code On Shopify Theme page like  "theme.liquid" 

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>  

<script>  

  var num = 0 ; 

  //var numand ;  

$('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {

   var first = '';

  var second= '';

  var thired = '';

   var comma = '';

  var and = '';

  var counta = [];

  var string = '';

   if ($('#agree1').is(':checked')) {

    $(this).submit();

  }  else {    var num = 1 ;  first = '\u2022  Test1';

               $( "#agree1" ).focus();  $("#agree1").addClass("redcheck"); 

               $("#agree1").css({ "outline": "2px solid #fc258f" });       

               counta.push(first);              

          }

  

  if ($('#agree2').is(':checked')) {     $(this).submit();   }

  else {    var num = 1 ;  second = '\u2022  Test2';  

               $( "#agree2" ).focus();  $("#agree2").addClass("redcheck"); 

               $("#agree2").css({ "outline": "2px solid #fc258f" });               

               counta.push(second);              

        }

  if ($('#agree3').is(':checked')) {     $(this).submit();   }

  else { var num = 1 ;  thired = '\u2022 Test2';

         $( "#agree3" ).focus();  $("#agree3").addClass("redcheck");

         $("#agree3").css({ "outline": "2px solid #fc258f" });         

         counta.push(thired);        

       }  

   var i;

  for (i = 0; i < counta.length; i++) {

    //text += cars[i] + "<br>";

      string = string+ counta[i]+ '\n';

    

     /*if(counta.length==2  &&(i==0) )

     {  string = string+ ' and '; }

    

     if((counta.length==3) &&(i==0))

     {  string = string+' ,'; }

    

      if((counta.length==3) &&(i==1))

     {  string = string+' and '; } */

   }

  

  

    

  if(num==1)  

  {

    //alert("Sie haben vergessen, die "+first+" das "+second+" und die "+thired+" zu akzeptieren.");

    //"+first+" "+second+" "+thired+"

    swal({  

        text: "Sie haben vergessen folgendes zu akzeptieren :\n"+string,

        icon: "warning",

        html: true,

        className: "qwer"

         });

    var num = 0;

    return false;

    

  }

  

});

  

  

  

$('#agree1').on('change', function() {

     $("#agree1").css({ "outline": "none" });  

});

$('#agree2').on('change', function() {

   $("#agree2").css({ "outline": "none" });  

});

$('#agree3').on('change', function() {

   $("#agree3").css({ "outline": "none" });  

});  

 </script>  

   <style>

    

    .swal-text {

      line-height:1.5 !important;

    }

  

    #agree2 { 

    vertical-align: top;

    }

    

    .swal-button {

      background-color : #000;

    }

    

    .redcheck input[type=checkbox] {

       

      outline: 2px solid red;

      

     }

  

  </style>

This is Checkbox code you can add this code to your cart page. like cart.liquid

   

<p style="height:10px"></p>

<table cellpadding="0" cellspacing="0" style="margin-bottom:0px !important ; border:2px solid white !important">

  <tr><td style="padding:0px;border:2px solid white; padding-left:1px">

  <input style="float:none; vertical-align: middle; width:15px; height:15px;" type="checkbox" id="agree1" /></td>

<td style="padding:0px;border:2px solid white"><label style="display:inline; float:none" for="agree1">   

  Ich habe die <a href="/policies/terms-of-service"> </a> Here is label .

  </label></td></tr></table>

<p style="height:6px"></p>

<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px !important; border:2px solid white !important">

  <tr><td style="padding:0px;border:2px solid white;padding-left:1px"><span style="vertical-align:top">

  <input style="float:none; vertical-align: middle; width:15px; height:15px;" type="checkbox" id="agree2" /></span></td>

<td style="padding:2px;border:2px solid white">

<label style="display:inline; float:none" for="agree2">

 Ich habe die <a href="policies/refund-policy">Here is label  </a>

</label> </td></tr></table>

                  <p style="height:6px"></p>

<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:0px !important;border:2px solid white !important">

  <tr><td style="padding:0px;border:2px solid white;padding-left:1px"> <span style="vertical-align:top">

  <input style="float:none; vertical-align: middle;width:15px; height:15px;" type="checkbox" id="agree3" /></span>

</td><td style="padding:2px;border:2px solid white">   

<label style="display:inline; float:none" for="agree3">

 Ich habe die <a href="policies/privacy-policy">Datenschutzerklärung </a> zur Kenntnis genommen und bin damit einverstanden dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung meiner Bestellung benutzt. Mit dem Absenden des Bestellformulars erkläre ich mich mit der Verarbeitung einverstanden.

</label></td></tr></table>