1 Тема от liman324

  • liman324
  • Administrator
  • На форуме
  • Зарегистрирован: 2019-08-21
  • Сообщений: 4,686

Тема: checkbox

Данный контент доступен только зарегистрированным пользователям.
http://forum.rcl-radio.ru/uploads/images/2021/05/9e85b25eac63b4f49870ff1d9cdb6b9c.png 

              
              <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS - Стилизация чекбокса</title>
  <style>
    /* для элемента input c type="checkbox" */
    .custom-checkbox {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

    /* для элемента label, связанного с .custom-checkbox */
    .custom-checkbox+label {
      display: inline-flex;
      align-items: center;
      user-select: none;
    }

    /* создание в label псевдоэлемента before со следующими стилями */
    .custom-checkbox+label::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      flex-grow: 0;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
margin-right: 0.0em;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 50% 50%;
    }

    /* стили при наведении курсора на checkbox */
    .custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
      border-color: #b3d7ff;
    }

    /* стили для активного чекбокса (при нажатии на него) */
    .custom-checkbox:not(:disabled):active+label::before {
      background-color: #b3d7ff;
      border-color: #b3d7ff;
    }

    /* стили для чекбокса, находящегося в фокусе */
    .custom-checkbox:focus+label::before {
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
    .custom-checkbox:focus:not(:checked)+label::before {
      border-color: #80bdff;
    }

    /* стили для чекбокса, находящегося в состоянии checked */
    .custom-checkbox:checked+label::before {
      border-color: #0b76ef;
      background-color: #000;
    }

    /* стили для чекбокса, находящегося в состоянии disabled */
    .custom-checkbox:disabled+label::before {
      background-color: #e9ecef;
    }

    body {
      padding: 10px 10px;
    }

    .checkbox {
      margin-bottom: 0.0em;
    }
  </style>

</head>

<body>

  <div class="checkbox">
    <input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="1" onFocus="this.blur()">
   <label for="a0">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a1" name="a1" value="1">
    <label for="a1">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a2" name="a2" value="1" onFocus="this.blur()">
    <label for="a2">  </label>

    <input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1" onFocus="this.blur()">
    <label for="a3">  </label>
      
    <input class="custom-checkbox" type="checkbox" id="a4" name="a4" value="1" onFocus="this.blur()">
    <label for="a4">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a5" name="a5" value="1" onFocus="this.blur()">
    <label for="a5">  </label>

    <input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1" onFocus="this.blur()">
    <label for="a6">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a7" name="a7" value="1" onFocus="this.blur()">
    <label for="a7">  </label>
  </div>
    
      <div class="checkbox">
    <input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="indigo">
   <label for="a0">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a1" name="a1" value="1">
    <label for="a1">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a2" name="a2" value="1" >
    <label for="a2">  </label>

    <input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1">
    <label for="a3">  </label>
      
    <input class="custom-checkbox" type="checkbox" id="a4" name="a4" value="1">
    <label for="a4">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a5" name="a5" value="1" >
    <label for="a5">  </label>

    <input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1">
    <label for="a6">  </label>
 
    <input class="custom-checkbox" type="checkbox" id="a7" name="a7" value="1">
    <label for="a7">  </label>
  </div>

</body>

</html>

2 Ответ от liman324

  • liman324
  • Administrator
  • На форуме
  • Зарегистрирован: 2019-08-21
  • Сообщений: 4,686

Re: checkbox

http://forum.rcl-radio.ru/uploads/images/2021/05/85eaf45a1e8e533d34438648779f813b.png 

               
              <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS - Стилизация чекбокса</title>
  <style>
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: '';
      display: inline-block;
      width: 4.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox:checked+label::before {background-color: #000;
    }

 /*-----------------------------------*/
.custom-checkbox1{position: absolute; z-index: -1;opacity: 0;}
.custom-checkbox1+label::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 4em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 4.0em;
      margin:  0px 31px;   
    }
.custom-checkbox1:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox1:checked+label::before {background-color: #000;
    }

/*-------------------------------------- */    
.custom-checkbox2 {
      position: absolute;z-index: -1;opacity: 0;
     }
.custom-checkbox2+label::before {
      margin: 0px 118px;
      content: '';
      display: inline-block;
      width: 1.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox2:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox2:checked+label::before {background-color: #000;
    }


.checkbox {margin-bottom: -0.5em;}
  </style>

</head>

<body>
<center>
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="1" onFocus="this.blur()">
   <label for="a0"></label>
 </div>
      <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a1" name="a1" value="1" onFocus="this.blur()">
    <label for="a1"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a2" name="a2" value="1" onFocus="this.blur()">
    <label for="a2"></label>
 </div>
    
    
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1" onFocus="this.blur()">
   <label for="a3"></label>
 </div>
     
    
          <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a4" name="a4" value="1" onFocus="this.blur()">
    <label for="a4"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a5" name="a5" value="1" onFocus="this.blur()">
    <label for="a5"></label>
 </div>
    
      <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1" onFocus="this.blur()">
   <label for="a6"></label>
 </div>
    
          <div class="checkbox">   
    <input class="custom-checkbox2" type="checkbox" id="a7" name="a7" value="1" onFocus="this.blur()">
   <label for="a7"></label>
 </div>
    
</center>
</body>

</html>

3 Ответ от liman324

  • liman324
  • Administrator
  • На форуме
  • Зарегистрирован: 2019-08-21
  • Сообщений: 4,686

Re: checkbox

http://forum.rcl-radio.ru/uploads/images/2021/05/83c6bbcf9a3ce59093ab2c1d2757bc53.png 

 <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS - Стилизация чекбокса</title>
  <style>
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: '';
      display: inline-block;
      width: 4.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox:checked+label::before {background-color: #000;
    }

 /*-----------------------------------*/
.custom-checkbox1{position: absolute; z-index: -1;opacity: 0;}
.custom-checkbox1+label::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 4em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 4.0em;
      margin:  0px 31px;   
    }
.custom-checkbox1:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox1:checked+label::before {background-color: #000;
    }

/*-------------------------------------- */    
.custom-checkbox2 {
      position: absolute;z-index: -1;opacity: 0;
     }
.custom-checkbox2+label::before {
      margin: 0px 118px;
      content: '';
      display: inline-block;
      width: 1.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox2:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox2:checked+label::before {background-color: #000;
    }


.checkbox {margin-bottom: -0.5em;}
  </style>

</head>

<body>
<center>
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="1" onFocus="this.blur()">
   <label for="a0"></label>
 </div>
      <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a1" name="a1" value="1" onFocus="this.blur()">
    <label for="a1"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a2" name="a2" value="1" onFocus="this.blur()">
    <label for="a2"></label>
 </div>
    
    
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1" onFocus="this.blur()">
   <label for="a3"></label>
 </div>
     
    
          <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a4" name="a4" value="1" onFocus="this.blur()">
    <label for="a4"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a5" name="a5" value="1" onFocus="this.blur()">
    <label for="a5"></label>
 </div>
    
      <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1" onFocus="this.blur()">
   <label for="a6"></label>
 </div>
    
          <div class="checkbox">   
    <input class="custom-checkbox2" type="checkbox" id="a7" name="a7" value="1" onFocus="this.blur()">
   <label for="a7"></label>
 </div>
    
</center>
    
    <div id="rezz">BIN</div>
    <div id="rezz1">DEC</div>
    <div id="rezz2">HEX</div>
</body>

    
    


<script>

var c0 = document.querySelector('#a0');
var c1 = document.querySelector('#a1');
var c2 = document.querySelector('#a2');
var c3 = document.querySelector('#a3');
var c4 = document.querySelector('#a4');
var c5 = document.querySelector('#a5');
var c6 = document.querySelector('#a6');
var c7 = document.querySelector('#a7');    
var rez0,rez1,rez2,rez3,rez4,rez5,rez6,rez7;
var sum;    


   onclick = function data() {
   if (c0.checked) {rez0=1;} else {rez0=0;}
   if (c1.checked) {rez1=1;} else {rez1=0;}
   if (c2.checked) {rez2=1;} else {rez2=0;}
   if (c3.checked) {rez3=1;} else {rez3=0;}
   if (c4.checked) {rez4=1;} else {rez4=0;}
   if (c5.checked) {rez5=1;} else {rez5=0;}
   if (c6.checked) {rez6=1;} else {rez6=0;}
   if (c7.checked) {rez7=1;} else {rez7=0;} 
   sum = (rez0<<7)+(rez1<<6)+(rez2<<5)+(rez3<<4)+(rez4<<3)+(rez5<<2)+(rez6<<1)+rez7;    
   document.getElementById("rezz").innerHTML = '0b'+rez0+''+rez1+''+rez2+''+rez3+''+rez4+''+rez5+''+rez6+''+rez7;    
   document.getElementById("rezz1").innerHTML = sum;
   document.getElementById("rezz2").innerHTML = '0x'+ sum.toString(16);}
   
</script>    
</html>

4 Ответ от liman324

  • liman324
  • Administrator
  • На форуме
  • Зарегистрирован: 2019-08-21
  • Сообщений: 4,686

Re: checkbox

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 3px -17px;
      content: '';
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      border: 1px solid #adb5bd;
      border-radius: 1.0em;
      margin-right: 1.0em;
    }
.custom-checkbox:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox:checked+label::before {background-color: #000;
    }
.checkbox {margin-bottom: -0.5em;
margin-left: 1.5em;}
     
  </style>
    </head>
    <body><center>
 <form id="newForm">
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="1" onFocus="this.blur()"><label for="a0"></label>
<input class="custom-checkbox" type="checkbox" id="a1" name="a1" value="1" onFocus="this.blur()"><label for="a1"></label>  
<input class="custom-checkbox" type="checkbox" id="a2" name="a2" value="1" onFocus="this.blur()"><label for="a2"></label>
<input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1" onFocus="this.blur()"><label for="a3"></label> 
<input class="custom-checkbox" type="checkbox" id="a4" name="a4" value="1" onFocus="this.blur()"><label for="a4"></label>  
<input class="custom-checkbox" type="checkbox" id="a5" name="a5" value="1" onFocus="this.blur()"><label for="a5"></label> 
<input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1" onFocus="this.blur()"><label for="a6"></label>
<input class="custom-checkbox" type="checkbox" id="a7" name="a7" value="1" onFocus="this.blur()"><label for="a7"></label>        
 </div>
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="b0" name="b0" value="1" onFocus="this.blur()"><label for="b0"></label>
<input class="custom-checkbox" type="checkbox" id="b1" name="b1" value="1" onFocus="this.blur()"><label for="b1"></label>  
<input class="custom-checkbox" type="checkbox" id="b2" name="b2" value="1" onFocus="this.blur()"><label for="b2"></label>
<input class="custom-checkbox" type="checkbox" id="b3" name="b3" value="1" onFocus="this.blur()"><label for="b3"></label> 
<input class="custom-checkbox" type="checkbox" id="b4" name="b4" value="1" onFocus="this.blur()"><label for="b4"></label>  
<input class="custom-checkbox" type="checkbox" id="b5" name="b5" value="1" onFocus="this.blur()"><label for="b5"></label> 
<input class="custom-checkbox" type="checkbox" id="b6" name="b6" value="1" onFocus="this.blur()"><label for="b6"></label>
<input class="custom-checkbox" type="checkbox" id="b7" name="b7" value="1" onFocus="this.blur()"><label for="b7"></label>        
 </div>   
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="c0" name="c0" value="1" onFocus="this.blur()"><label for="c0"></label>
<input class="custom-checkbox" type="checkbox" id="c1" name="c1" value="1" onFocus="this.blur()"><label for="c1"></label>  
<input class="custom-checkbox" type="checkbox" id="c2" name="c2" value="1" onFocus="this.blur()"><label for="c2"></label>
<input class="custom-checkbox" type="checkbox" id="c3" name="c3" value="1" onFocus="this.blur()"><label for="c3"></label> 
<input class="custom-checkbox" type="checkbox" id="c4" name="c4" value="1" onFocus="this.blur()"><label for="c4"></label>  
<input class="custom-checkbox" type="checkbox" id="c5" name="c5" value="1" onFocus="this.blur()"><label for="c5"></label> 
<input class="custom-checkbox" type="checkbox" id="c6" name="c6" value="1" onFocus="this.blur()"><label for="c6"></label>
<input class="custom-checkbox" type="checkbox" id="c7" name="c7" value="1" onFocus="this.blur()"><label for="c7"></label>        
 </div>   
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="d0" name="d0" value="1" onFocus="this.blur()"><label for="d0"></label>
<input class="custom-checkbox" type="checkbox" id="d1" name="d1" value="1" onFocus="this.blur()"><label for="d1"></label>  
<input class="custom-checkbox" type="checkbox" id="d2" name="d2" value="1" onFocus="this.blur()"><label for="d2"></label>
<input class="custom-checkbox" type="checkbox" id="d3" name="d3" value="1" onFocus="this.blur()"><label for="d3"></label> 
<input class="custom-checkbox" type="checkbox" id="d4" name="d4" value="1" onFocus="this.blur()"><label for="d4"></label>  
<input class="custom-checkbox" type="checkbox" id="d5" name="d5" value="1" onFocus="this.blur()"><label for="d5"></label> 
<input class="custom-checkbox" type="checkbox" id="d6" name="d6" value="1" onFocus="this.blur()"><label for="d6"></label>
<input class="custom-checkbox" type="checkbox" id="d7" name="d7" value="1" onFocus="this.blur()"><label for="d7"></label>        
 </div>       
    
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="e0" name="e0" value="1" onFocus="this.blur()"><label for="e0"></label>
<input class="custom-checkbox" type="checkbox" id="e1" name="e1" value="1" onFocus="this.blur()"><label for="e1"></label>  
<input class="custom-checkbox" type="checkbox" id="e2" name="e2" value="1" onFocus="this.blur()"><label for="e2"></label>
<input class="custom-checkbox" type="checkbox" id="e3" name="e3" value="1" onFocus="this.blur()"><label for="e3"></label> 
<input class="custom-checkbox" type="checkbox" id="e4" name="e4" value="1" onFocus="this.blur()"><label for="e4"></label>  
<input class="custom-checkbox" type="checkbox" id="e5" name="e5" value="1" onFocus="this.blur()"><label for="e5"></label> 
<input class="custom-checkbox" type="checkbox" id="e6" name="e6" value="1" onFocus="this.blur()"><label for="e6"></label>
<input class="custom-checkbox" type="checkbox" id="e7" name="e7" value="1" onFocus="this.blur()"><label for="e7"></label>        
 </div> 
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="f0" name="f0" value="1" onFocus="this.blur()"><label for="f0"></label>
<input class="custom-checkbox" type="checkbox" id="f1" name="f1" value="1" onFocus="this.blur()"><label for="f1"></label>  
<input class="custom-checkbox" type="checkbox" id="f2" name="f2" value="1" onFocus="this.blur()"><label for="f2"></label>
<input class="custom-checkbox" type="checkbox" id="f3" name="f3" value="1" onFocus="this.blur()"><label for="f3"></label> 
<input class="custom-checkbox" type="checkbox" id="f4" name="f4" value="1" onFocus="this.blur()"><label for="f4"></label>  
<input class="custom-checkbox" type="checkbox" id="f5" name="f5" value="1" onFocus="this.blur()"><label for="f5"></label> 
<input class="custom-checkbox" type="checkbox" id="f6" name="f6" value="1" onFocus="this.blur()"><label for="f6"></label>
<input class="custom-checkbox" type="checkbox" id="f7" name="f7" value="1" onFocus="this.blur()"><label for="f7"></label>        
 </div> 
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="g0" name="g0" value="1" onFocus="this.blur()"><label for="g0"></label>
<input class="custom-checkbox" type="checkbox" id="g1" name="g1" value="1" onFocus="this.blur()"><label for="g1"></label>  
<input class="custom-checkbox" type="checkbox" id="g2" name="g2" value="1" onFocus="this.blur()"><label for="g2"></label>
<input class="custom-checkbox" type="checkbox" id="g3" name="g3" value="1" onFocus="this.blur()"><label for="g3"></label> 
<input class="custom-checkbox" type="checkbox" id="g4" name="g4" value="1" onFocus="this.blur()"><label for="g4"></label>  
<input class="custom-checkbox" type="checkbox" id="g5" name="g5" value="1" onFocus="this.blur()"><label for="g5"></label> 
<input class="custom-checkbox" type="checkbox" id="g6" name="g6" value="1" onFocus="this.blur()"><label for="g6"></label>
<input class="custom-checkbox" type="checkbox" id="g7" name="g7" value="1" onFocus="this.blur()"><label for="g7"></label>        
 </div>  
     
  <div class="checkbox">   
<input class="custom-checkbox" type="checkbox" id="h0" name="h0" value="1" onFocus="this.blur()"><label for="h0"></label>
<input class="custom-checkbox" type="checkbox" id="h1" name="h1" value="1" onFocus="this.blur()"><label for="h1"></label>  
<input class="custom-checkbox" type="checkbox" id="h2" name="h2" value="1" onFocus="this.blur()"><label for="h2"></label>
<input class="custom-checkbox" type="checkbox" id="h3" name="h3" value="1" onFocus="this.blur()"><label for="h3"></label> 
<input class="custom-checkbox" type="checkbox" id="h4" name="h4" value="1" onFocus="this.blur()"><label for="h4"></label>  
<input class="custom-checkbox" type="checkbox" id="h5" name="h5" value="1" onFocus="this.blur()"><label for="h5"></label> 
<input class="custom-checkbox" type="checkbox" id="h6" name="h6" value="1" onFocus="this.blur()"><label for="h6"></label>
<input class="custom-checkbox" type="checkbox" id="h7" name="h7" value="1" onFocus="this.blur()"><label for="h7"></label>        
 </div>       

<br>

<input type="button" onclick="newFunction()" value="Очистить">
<br><br>   
    <div id="rezz">BIN</div>
    <div id="rezz1">DEC</div>
    <div id="rezz2">HEX</div>

</center></body>

 </form>
<script>
  function newFunction() {document.getElementById("newForm").reset();}// очистка формы

var a0 = document.querySelector('#a0');
var a1 = document.querySelector('#a1');
var a2 = document.querySelector('#a2');
var a3 = document.querySelector('#a3');
var a4 = document.querySelector('#a4');
var a5 = document.querySelector('#a5');
var a6 = document.querySelector('#a6');
var a7 = document.querySelector('#a7');

var b0 = document.querySelector('#b0');
var b1 = document.querySelector('#b1');
var b2 = document.querySelector('#b2');
var b3 = document.querySelector('#b3');
var b4 = document.querySelector('#b4');
var b5 = document.querySelector('#b5');
var b6 = document.querySelector('#b6');
var b7 = document.querySelector('#b7');
    
var c0 = document.querySelector('#c0');
var c1 = document.querySelector('#c1');
var c2 = document.querySelector('#c2');
var c3 = document.querySelector('#c3');
var c4 = document.querySelector('#c4');
var c5 = document.querySelector('#c5');
var c6 = document.querySelector('#c6');
var c7 = document.querySelector('#c7');
    
var d0 = document.querySelector('#d0');
var d1 = document.querySelector('#d1');
var d2 = document.querySelector('#d2');
var d3 = document.querySelector('#d3');
var d4 = document.querySelector('#d4');
var d5 = document.querySelector('#d5');
var d6 = document.querySelector('#d6');
var d7 = document.querySelector('#d7');    
    
var e0 = document.querySelector('#e0');
var e1 = document.querySelector('#e1');
var e2 = document.querySelector('#e2');
var e3 = document.querySelector('#e3');
var e4 = document.querySelector('#e4');
var e5 = document.querySelector('#e5');
var e6 = document.querySelector('#e6');
var e7 = document.querySelector('#e7');        

var f0 = document.querySelector('#f0');
var f1 = document.querySelector('#f1');
var f2 = document.querySelector('#f2');
var f3 = document.querySelector('#f3');
var f4 = document.querySelector('#f4');
var f5 = document.querySelector('#f5');
var f6 = document.querySelector('#f6');
var f7 = document.querySelector('#f7');        
    
var g0 = document.querySelector('#g0');
var g1 = document.querySelector('#g1');
var g2 = document.querySelector('#g2');
var g3 = document.querySelector('#g3');
var g4 = document.querySelector('#g4');
var g5 = document.querySelector('#g5');
var g6 = document.querySelector('#g6');
var g7 = document.querySelector('#g7');      
    
var h0 = document.querySelector('#h0');
var h1 = document.querySelector('#h1');
var h2 = document.querySelector('#h2');
var h3 = document.querySelector('#h3');
var h4 = document.querySelector('#h4');
var h5 = document.querySelector('#h5');
var h6 = document.querySelector('#h6');
var h7 = document.querySelector('#h7');        
    
var rez_a0,rez_a1,rez_a2,rez_a3,rez_a4,rez_a5,rez_a6,rez_a7,sum_a;
var rez_b0,rez_b1,rez_b2,rez_b3,rez_b4,rez_b5,rez_b6,rez_b7,sum_b; 
var rez_c0,rez_c1,rez_c2,rez_c3,rez_c4,rez_c5,rez_c6,rez_c7,sum_c;
var rez_d0,rez_d1,rez_d2,rez_d3,rez_d4,rez_d5,rez_d6,rez_d7,sum_d;
var rez_e0,rez_e1,rez_e2,rez_e3,rez_e4,rez_e5,rez_e6,rez_e7,sum_e;
var rez_f0,rez_f1,rez_f2,rez_f3,rez_f4,rez_f5,rez_f6,rez_f7,sum_f; 
var rez_g0,rez_g1,rez_g2,rez_g3,rez_g4,rez_g5,rez_g6,rez_g7,sum_g;
var rez_h0,rez_h1,rez_h2,rez_h3,rez_h4,rez_h5,rez_h6,rez_h7,sum_h;    
  onclick = function data() {
  if (a0.checked) {rez_a0=1;} else {rez_a0=0;}
   if (a1.checked) {rez_a1=1;} else {rez_a1=0;}
   if (a2.checked) {rez_a2=1;} else {rez_a2=0;}
   if (a3.checked) {rez_a3=1;} else {rez_a3=0;}
   if (a4.checked) {rez_a4=1;} else {rez_a4=0;}
   if (a5.checked) {rez_a5=1;} else {rez_a5=0;}
   if (a6.checked) {rez_a6=1;} else {rez_a6=0;}
   if (a7.checked) {rez_a7=1;} else {rez_a7=0;} 
  if (b0.checked) {rez_b0=1;} else {rez_b0=0;}
   if (b1.checked) {rez_b1=1;} else {rez_b1=0;}
   if (b2.checked) {rez_b2=1;} else {rez_b2=0;}
   if (b3.checked) {rez_b3=1;} else {rez_b3=0;}
   if (b4.checked) {rez_b4=1;} else {rez_b4=0;}
   if (b5.checked) {rez_b5=1;} else {rez_b5=0;}
   if (b6.checked) {rez_b6=1;} else {rez_b6=0;}
   if (b7.checked) {rez_b7=1;} else {rez_b7=0;}
  if (c0.checked) {rez_c0=1;} else {rez_c0=0;}
   if (c1.checked) {rez_c1=1;} else {rez_c1=0;}
   if (c2.checked) {rez_c2=1;} else {rez_c2=0;}
   if (c3.checked) {rez_c3=1;} else {rez_c3=0;}
   if (c4.checked) {rez_c4=1;} else {rez_c4=0;}
   if (c5.checked) {rez_c5=1;} else {rez_c5=0;}
   if (c6.checked) {rez_c6=1;} else {rez_c6=0;}
   if (c7.checked) {rez_c7=1;} else {rez_c7=0;} 
  if (d0.checked) {rez_d0=1;} else {rez_d0=0;}
   if (d1.checked) {rez_d1=1;} else {rez_d1=0;}
   if (d2.checked) {rez_d2=1;} else {rez_d2=0;}
   if (d3.checked) {rez_d3=1;} else {rez_d3=0;}
   if (d4.checked) {rez_d4=1;} else {rez_d4=0;}
   if (d5.checked) {rez_d5=1;} else {rez_d5=0;}
   if (d6.checked) {rez_d6=1;} else {rez_d6=0;}
   if (d7.checked) {rez_d7=1;} else {rez_d7=0;} 
  if (f0.checked) {rez_f0=1;} else {rez_f0=0;}
   if (f1.checked) {rez_f1=1;} else {rez_f1=0;}
   if (f2.checked) {rez_f2=1;} else {rez_f2=0;}
   if (f3.checked) {rez_f3=1;} else {rez_f3=0;}
   if (f4.checked) {rez_f4=1;} else {rez_f4=0;}
   if (f5.checked) {rez_f5=1;} else {rez_f5=0;}
   if (f6.checked) {rez_f6=1;} else {rez_f6=0;}
   if (f7.checked) {rez_f7=1;} else {rez_f7=0;}       
  if (e0.checked) {rez_e0=1;} else {rez_e0=0;}
   if (e1.checked) {rez_e1=1;} else {rez_e1=0;}
   if (e2.checked) {rez_e2=1;} else {rez_e2=0;}
   if (e3.checked) {rez_e3=1;} else {rez_e3=0;}
   if (e4.checked) {rez_e4=1;} else {rez_e4=0;}
   if (e5.checked) {rez_e5=1;} else {rez_e5=0;}
   if (e6.checked) {rez_e6=1;} else {rez_e6=0;}
   if (e7.checked) {rez_e7=1;} else {rez_e7=0;} 
  if (g0.checked) {rez_g0=1;} else {rez_g0=0;}
   if (g1.checked) {rez_g1=1;} else {rez_g1=0;}
   if (g2.checked) {rez_g2=1;} else {rez_g2=0;}
   if (g3.checked) {rez_g3=1;} else {rez_g3=0;}
   if (g4.checked) {rez_g4=1;} else {rez_g4=0;}
   if (g5.checked) {rez_g5=1;} else {rez_g5=0;}
   if (g6.checked) {rez_g6=1;} else {rez_g6=0;}
   if (g7.checked) {rez_g7=1;} else {rez_g7=0;}       
  if (h0.checked) {rez_h0=1;} else {rez_h0=0;}
   if (h1.checked) {rez_h1=1;} else {rez_h1=0;}
   if (h2.checked) {rez_h2=1;} else {rez_h2=0;}
   if (h3.checked) {rez_h3=1;} else {rez_h3=0;}
   if (h4.checked) {rez_h4=1;} else {rez_h4=0;}
   if (h5.checked) {rez_h5=1;} else {rez_h5=0;}
   if (h6.checked) {rez_h6=1;} else {rez_h6=0;}
   if (h7.checked) {rez_h7=1;} else {rez_h7=0;}       
      
   sum_a = (rez_a0<<7)+(rez_a1<<6)+(rez_a2<<5)+(rez_a3<<4)+(rez_a4<<3)+(rez_a5<<2)+(rez_a6<<1)+rez_a7;
   sum_b = (rez_b0<<7)+(rez_b1<<6)+(rez_b2<<5)+(rez_b3<<4)+(rez_b4<<3)+(rez_b5<<2)+(rez_b6<<1)+rez_b7;
   sum_c = (rez_c0<<7)+(rez_c1<<6)+(rez_c2<<5)+(rez_c3<<4)+(rez_c4<<3)+(rez_c5<<2)+(rez_c6<<1)+rez_c7;  
   sum_d = (rez_d0<<7)+(rez_d1<<6)+(rez_d2<<5)+(rez_d3<<4)+(rez_d4<<3)+(rez_d5<<2)+(rez_d6<<1)+rez_d7;  
   sum_e = (rez_e0<<7)+(rez_e1<<6)+(rez_e2<<5)+(rez_e3<<4)+(rez_e4<<3)+(rez_e5<<2)+(rez_e6<<1)+rez_e7;  
   sum_f = (rez_f0<<7)+(rez_f1<<6)+(rez_f2<<5)+(rez_f3<<4)+(rez_f4<<3)+(rez_f5<<2)+(rez_f6<<1)+rez_f7;  
   sum_g = (rez_g0<<7)+(rez_g1<<6)+(rez_g2<<5)+(rez_g3<<4)+(rez_g4<<3)+(rez_g5<<2)+(rez_g6<<1)+rez_g7;  
   sum_h = (rez_h0<<7)+(rez_h1<<6)+(rez_h2<<5)+(rez_h3<<4)+(rez_h4<<3)+(rez_h5<<2)+(rez_h6<<1)+rez_h7;        
   document.getElementById("rezz").innerHTML = '{0b'+rez_a0+''+rez_a1+''+rez_a2+''+rez_a3+''+rez_a4+''+rez_a5+''+rez_a6+''+rez_a7+', 0b'+rez_b0+''+rez_b1+''+rez_b2+''+rez_b3+''+rez_b4+''+rez_b5+''+rez_b6+''+rez_b7+', 0b'+rez_c0+''+rez_c1+''+rez_c2+''+rez_c3+''+rez_c4+''+rez_c5+''+rez_c6+''+rez_c7+', 0b'+rez_d0+''+rez_d1+''+rez_d2+''+rez_d3+''+rez_d4+''+rez_d5+''+rez_d6+''+rez_d7+', 0b'+rez_e0+''+rez_e1+''+rez_e2+''+rez_e3+''+rez_e4+''+rez_e5+''+rez_e6+''+rez_e7+', 0b'+rez_f0+''+rez_f1+''+rez_f2+''+rez_f3+''+rez_f4+''+rez_f5+''+rez_f6+''+rez_f7+', 0b'+rez_g0+''+rez_g1+''+rez_g2+''+rez_g3+''+rez_g4+''+rez_g5+''+rez_g6+''+rez_g7+', 0b'+rez_h0+''+rez_h1+''+rez_h2+''+rez_h3+''+rez_h4+''+rez_h5+''+rez_h6+''+rez_h7+'}';   
   document.getElementById("rezz1").innerHTML = '{'+sum_a+', '+sum_b +', '+sum_c+', '+sum_d+', '+sum_e+', '+sum_f+', '+sum_g+', '+sum_h+'}';
   document.getElementById("rezz2").innerHTML = '{0x'+ sum_a.toString(16) +', 0x'+sum_b.toString(16)+', 0x'+sum_c.toString(16)+', 0x'+sum_d.toString(16)+', 0x'+sum_e.toString(16)+', 0x'+sum_f.toString(16)+', 0x'+sum_g.toString(16)+', 0x'+sum_h.toString(16)+'}';}
  
 

</script>    
</html>

5 Ответ от liman324

  • liman324
  • Administrator
  • На форуме
  • Зарегистрирован: 2019-08-21
  • Сообщений: 4,686

Re: checkbox

 <!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS - Стилизация чекбокса</title>
  <style>
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: '';
      display: inline-block;
      width: 4.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox:checked+label::before {background-color: #000;
    }

 /*-----------------------------------*/
.custom-checkbox1{position: absolute; z-index: -1;opacity: 0;}
.custom-checkbox1+label::before {
      content: '';
      display: inline-block;
      width: 1em;
      height: 4em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 4.0em;
      margin:  0px 31px;   
    }
.custom-checkbox1:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox1:checked+label::before {background-color: #000;
    }

/*-------------------------------------- */    
.custom-checkbox2 {
      position: absolute;z-index: -1;opacity: 0;
     }
.custom-checkbox2+label::before {
      margin: 0px 118px;
      content: '';
      display: inline-block;
      width: 1.0em;
      height: 1em;
      border: 1px solid #adb5bd;
      border-radius: 5.25em;
      margin-right: 1.0em;
    }
.custom-checkbox2:not(:disabled):active+label::before {
      background-color: #b3d7ff;border-color: #b3d7ff;}
.custom-checkbox2:checked+label::before {background-color: #000;
    }


.checkbox {margin-bottom: -0.5em;}
#rez{position: absolute;display: inline-block;margin: -170px 100px;}
#rezz{position: absolute;display: inline-block;margin: -150px 100px;}
#rezz1{position: absolute;display: inline-block;margin: -130px 100px;}
#rezz2{position: absolute;display: inline-block;margin: -110px 100px;}
input#but0 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_0.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but1 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_1.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but2 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_2.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but3 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_3.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but4 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_4.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but5 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_5.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but6 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_6.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but7 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_7.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but8 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_8.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but9 {background: url("http://rcl-radio.ru/wp-content/uploads/2021/05/7_9.png");width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
  </style>

</head>

<body>
<center>
 <form id="newForm">
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a0" name="a0" value="1" onFocus="this.blur()">
   <label for="a0"></label>
 </div>
      <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a1" name="a1" value="1" onFocus="this.blur()">
    <label for="a1"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a2" name="a2" value="1" onFocus="this.blur()">
    <label for="a2"></label>
 </div>
    
    
  <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a3" name="a3" value="1" onFocus="this.blur()">
   <label for="a3"></label>
 </div>
     
    
          <div class="checkbox">
    <input class="custom-checkbox1" type="checkbox" id="a4" name="a4" value="1" onFocus="this.blur()">
    <label for="a4"></label>
 
    <input class="custom-checkbox1" type="checkbox" id="a5" name="a5" value="1" onFocus="this.blur()">
    <label for="a5"></label>
 </div>
    
      <div class="checkbox">   
    <input class="custom-checkbox" type="checkbox" id="a6" name="a6" value="1" onFocus="this.blur()">
   <label for="a6"></label>
 </div>
    
          <div class="checkbox">   
    <input class="custom-checkbox2" type="checkbox" id="a7" name="a7" value="1" onFocus="this.blur()">
   <label for="a7"></label>
 </div>
 
    <div id="rez"></div>    
    <div id="rezz">BIN</div>
    <div id="rezz1">DEC</div>
    <div id="rezz2">HEX</div>
<br>
<input type="button" onclick="newFunction()" value="Очистить">
<input type="button" id="button" value="Инверсия кода">


<br><br>

<input id="but0" type="button" onclick="checkAll_0()" name="picture0" >
<input id="but1" type="button" onclick="checkAll_1()" name="picture1" >
<input id="but2" type="button" onclick="checkAll_2()" name="picture2" >
<input id="but3" type="button" onclick="checkAll_3()" name="picture3" >
<input id="but4" type="button" onclick="checkAll_4()" name="picture4" >
<input id="but5" type="button" onclick="checkAll_5()" name="picture5" >
<input id="but6" type="button" onclick="checkAll_6()" name="picture6" >
<input id="but7" type="button" onclick="checkAll_7()" name="picture7" >
<input id="but8" type="button" onclick="checkAll_8()" name="picture8" >
<input id="but9" type="button" onclick="checkAll_9()" name="picture9" >



</center></body>

 </form>
    



<script>

    function checkAll_0() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = true; // A
          a1.checked = true; // F
          a2.checked = true; // B 
          a3.checked = false;// G
          a4.checked = true; // E
          a5.checked = true; // C 
          a6.checked = true; // D
          a7.checked = false;// dp
    }
    function checkAll_1() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 0; // A
          a1.checked = 0; // F
          a2.checked = 1; // B 
          a3.checked = 0;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 0; // D
          a7.checked = 0;// dp
    }
    function checkAll_2() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 0; // F
          a2.checked = 1; // B 
          a3.checked = 1;// G
          a4.checked = 1; // E
          a5.checked = 0; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }
    function checkAll_3() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 0; // F
          a2.checked = 1; // B 
          a3.checked = 1;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }
    function checkAll_4() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 0; // A
          a1.checked = 1; // F
          a2.checked = 1; // B 
          a3.checked = 1;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 0; // D
          a7.checked = 0;// dp
    }
    function checkAll_5() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 1; // F
          a2.checked = 0; // B 
          a3.checked = 1;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }
    function checkAll_6() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 1; // F
          a2.checked = 0; // B 
          a3.checked = 1;// G
          a4.checked = 1; // E
          a5.checked = 1; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }
    function checkAll_7() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 0; // F
          a2.checked = 1; // B 
          a3.checked = 0;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 0; // D
          a7.checked = 0;// dp
    }
    function checkAll_8() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 1; // F
          a2.checked = 1; // B 
          a3.checked = 1;// G
          a4.checked = 1; // E
          a5.checked = 1; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }
    function checkAll_9() {
        var inputs = document.querySelectorAll('.custom-checkbox');        
          a0.checked = 1; // A
          a1.checked = 1; // F
          a2.checked = 1; // B 
          a3.checked = 1;// G
          a4.checked = 0; // E
          a5.checked = 1; // C 
          a6.checked = 1; // D
          a7.checked = 0;// dp
    }

  


function newFunction() {document.getElementById("newForm").reset();}// очистка формы

var c0 = document.querySelector('#a7');
var c1 = document.querySelector('#a0');
var c2 = document.querySelector('#a2');
var c3 = document.querySelector('#a5');
var c4 = document.querySelector('#a6');
var c5 = document.querySelector('#a4');
var c6 = document.querySelector('#a1');
var c7 = document.querySelector('#a3');    
var rez0,rez1,rez2,rez3,rez4,rez5,rez6,rez7;
var sum;
var i=0;
    
  button.onclick = function() { 
    i=i+1;
    if(i>2){i=1;}
    if(i==1){ 
onclick = function data() {
   if (c0.checked) {rez0=0;} else {rez0=1;}
   if (c1.checked) {rez1=0;} else {rez1=1;}
   if (c2.checked) {rez2=0;} else {rez2=1;}
   if (c3.checked) {rez3=0;} else {rez3=1;}
   if (c4.checked) {rez4=0;} else {rez4=1;}
   if (c5.checked) {rez5=0;} else {rez5=1;}
   if (c6.checked) {rez6=0;} else {rez6=1;}
   if (c7.checked) {rez7=0;} else {rez7=1;} 
   sum = (rez0<<7)+(rez1<<6)+(rez2<<5)+(rez3<<4)+(rez4<<3)+(rez5<<2)+(rez6<<1)+rez7;    
   document.getElementById("rezz").innerHTML = '0b'+rez0+''+rez1+''+rez2+''+rez3+''+rez4+''+rez5+''+rez6+''+rez7;    
   document.getElementById("rezz1").innerHTML = sum;
   document.getElementById("rez").innerHTML = "Инверсия кода";
   document.getElementById("rezz2").innerHTML = '0x'+ sum.toString(16);}
} 
   if(i==2){
onclick = function data() {
   if (c0.checked) {rez0=1;} else {rez0=0;}
   if (c1.checked) {rez1=1;} else {rez1=0;}
   if (c2.checked) {rez2=1;} else {rez2=0;}
   if (c3.checked) {rez3=1;} else {rez3=0;}
   if (c4.checked) {rez4=1;} else {rez4=0;}
   if (c5.checked) {rez5=1;} else {rez5=0;}
   if (c6.checked) {rez6=1;} else {rez6=0;}
   if (c7.checked) {rez7=1;} else {rez7=0;} 
   sum = (rez0<<7)+(rez1<<6)+(rez2<<5)+(rez3<<4)+(rez4<<3)+(rez5<<2)+(rez6<<1)+rez7;    
   document.getElementById("rezz").innerHTML = '0b'+rez0+''+rez1+''+rez2+''+rez3+''+rez4+''+rez5+''+rez6+''+rez7;    
   document.getElementById("rezz1").innerHTML = sum;
   document.getElementById("rez").innerHTML = "            ";
   document.getElementById("rezz2").innerHTML = '0x'+ sum.toString(16);}
}      
}
   if(i==0){ 
  onclick = function data() {
   if (c0.checked) {rez0=1;} else {rez0=0;}
   if (c1.checked) {rez1=1;} else {rez1=0;}
   if (c2.checked) {rez2=1;} else {rez2=0;}
   if (c3.checked) {rez3=1;} else {rez3=0;}
   if (c4.checked) {rez4=1;} else {rez4=0;}
   if (c5.checked) {rez5=1;} else {rez5=0;}
   if (c6.checked) {rez6=1;} else {rez6=0;}
   if (c7.checked) {rez7=1;} else {rez7=0;} 
   sum = (rez0<<7)+(rez1<<6)+(rez2<<5)+(rez3<<4)+(rez4<<3)+(rez5<<2)+(rez6<<1)+rez7;    
   document.getElementById("rezz").innerHTML = '0b'+rez0+''+rez1+''+rez2+''+rez3+''+rez4+''+rez5+''+rez6+''+rez7;    
   document.getElementById("rezz1").innerHTML = sum;
   document.getElementById("rez").innerHTML = "            ";
   document.getElementById("rezz2").innerHTML = '0x'+ sum.toString(16);}
}

</script>    
</html>