<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
	<title type="html"><![CDATA[forum.rcl-radio.ru &mdash; checkbox]]></title>
	<link rel="self" href="http://forum.rcl-radio.ru/extern.php?action=feed&amp;tid=323&amp;type=atom" />
	<updated>2021-05-20T09:45:05Z</updated>
	<generator>PunBB</generator>
	<id>http://forum.rcl-radio.ru/viewtopic.php?id=323</id>
		<entry>
			<title type="html"><![CDATA[Re: checkbox]]></title>
			<link rel="alternate" href="http://forum.rcl-radio.ru/viewtopic.php?pid=3604#p3604" />
			<content type="html"><![CDATA[<div class="codebox"><pre><code> &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ru&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;CSS - Стилизация чекбокса&lt;/title&gt;
  &lt;style&gt;
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: &#039;&#039;;
      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: &#039;&#039;;
      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: &#039;&#039;;
      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(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_0.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but1 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_1.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but2 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_2.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but3 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_3.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but4 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_4.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but5 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_5.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but6 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_6.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but7 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_7.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but8 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_8.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
input#but9 {background: url(&quot;http://rcl-radio.ru/wp-content/uploads/2021/05/7_9.png&quot;);width: 2.5em ;height: 4em;border: 0;background-size: 2.5em 4em;}
  &lt;/style&gt;

&lt;/head&gt;

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


&lt;br&gt;&lt;br&gt;

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



&lt;/center&gt;&lt;/body&gt;

 &lt;/form&gt;
    



&lt;script&gt;

    function checkAll_0() {
        var inputs = document.querySelectorAll(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&#039;.custom-checkbox&#039;);        
          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(&quot;newForm&quot;).reset();}// очистка формы

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

&lt;/script&gt;    
&lt;/html&gt;		</code></pre></div>]]></content>
			<author>
				<name><![CDATA[liman324]]></name>
				<uri>http://forum.rcl-radio.ru/profile.php?id=2</uri>
			</author>
			<updated>2021-05-20T09:45:05Z</updated>
			<id>http://forum.rcl-radio.ru/viewtopic.php?pid=3604#p3604</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: checkbox]]></title>
			<link rel="alternate" href="http://forum.rcl-radio.ru/viewtopic.php?pid=3603#p3603" />
			<content type="html"><![CDATA[<div class="codebox"><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ru&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

  &lt;style&gt;
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 3px -17px;
      content: &#039;&#039;;
      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;}
     
  &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;center&gt;
 &lt;form id=&quot;newForm&quot;&gt;
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a0&quot; name=&quot;a0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a1&quot; name=&quot;a1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a2&quot; name=&quot;a2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a3&quot; name=&quot;a3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a4&quot; name=&quot;a4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a5&quot; name=&quot;a5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a6&quot; name=&quot;a6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a7&quot; name=&quot;a7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;a7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b0&quot; name=&quot;b0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b1&quot; name=&quot;b1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b2&quot; name=&quot;b2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b3&quot; name=&quot;b3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b4&quot; name=&quot;b4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b5&quot; name=&quot;b5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b6&quot; name=&quot;b6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;b7&quot; name=&quot;b7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;b7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;   
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c0&quot; name=&quot;c0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c1&quot; name=&quot;c1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c2&quot; name=&quot;c2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c3&quot; name=&quot;c3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c4&quot; name=&quot;c4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c5&quot; name=&quot;c5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c6&quot; name=&quot;c6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;c7&quot; name=&quot;c7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;c7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;   
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d0&quot; name=&quot;d0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d1&quot; name=&quot;d1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d2&quot; name=&quot;d2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d3&quot; name=&quot;d3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d4&quot; name=&quot;d4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d5&quot; name=&quot;d5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d6&quot; name=&quot;d6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;d7&quot; name=&quot;d7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;d7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;       
    
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e0&quot; name=&quot;e0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e1&quot; name=&quot;e1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e2&quot; name=&quot;e2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e3&quot; name=&quot;e3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e4&quot; name=&quot;e4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e5&quot; name=&quot;e5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e6&quot; name=&quot;e6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;e7&quot; name=&quot;e7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;e7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt; 
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f0&quot; name=&quot;f0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f1&quot; name=&quot;f1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f2&quot; name=&quot;f2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f3&quot; name=&quot;f3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f4&quot; name=&quot;f4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f5&quot; name=&quot;f5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f6&quot; name=&quot;f6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;f7&quot; name=&quot;f7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;f7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt; 
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g0&quot; name=&quot;g0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g1&quot; name=&quot;g1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g2&quot; name=&quot;g2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g3&quot; name=&quot;g3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g4&quot; name=&quot;g4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g5&quot; name=&quot;g5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g6&quot; name=&quot;g6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;g7&quot; name=&quot;g7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;g7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;  
     
  &lt;div class=&quot;checkbox&quot;&gt;   
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h0&quot; name=&quot;h0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h0&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h1&quot; name=&quot;h1&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h1&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h2&quot; name=&quot;h2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h2&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h3&quot; name=&quot;h3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h3&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h4&quot; name=&quot;h4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h4&quot;&gt;&lt;/label&gt;  
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h5&quot; name=&quot;h5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h5&quot;&gt;&lt;/label&gt; 
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h6&quot; name=&quot;h6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h6&quot;&gt;&lt;/label&gt;
&lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;h7&quot; name=&quot;h7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;&lt;label for=&quot;h7&quot;&gt;&lt;/label&gt;        
 &lt;/div&gt;       

&lt;br&gt;

&lt;input type=&quot;button&quot; onclick=&quot;newFunction()&quot; value=&quot;Очистить&quot;&gt;
&lt;br&gt;&lt;br&gt;   
    &lt;div id=&quot;rezz&quot;&gt;BIN&lt;/div&gt;
    &lt;div id=&quot;rezz1&quot;&gt;DEC&lt;/div&gt;
    &lt;div id=&quot;rezz2&quot;&gt;HEX&lt;/div&gt;

&lt;/center&gt;&lt;/body&gt;

 &lt;/form&gt;
&lt;script&gt;
  function newFunction() {document.getElementById(&quot;newForm&quot;).reset();}// очистка формы

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

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

var f0 = document.querySelector(&#039;#f0&#039;);
var f1 = document.querySelector(&#039;#f1&#039;);
var f2 = document.querySelector(&#039;#f2&#039;);
var f3 = document.querySelector(&#039;#f3&#039;);
var f4 = document.querySelector(&#039;#f4&#039;);
var f5 = document.querySelector(&#039;#f5&#039;);
var f6 = document.querySelector(&#039;#f6&#039;);
var f7 = document.querySelector(&#039;#f7&#039;);        
    
var g0 = document.querySelector(&#039;#g0&#039;);
var g1 = document.querySelector(&#039;#g1&#039;);
var g2 = document.querySelector(&#039;#g2&#039;);
var g3 = document.querySelector(&#039;#g3&#039;);
var g4 = document.querySelector(&#039;#g4&#039;);
var g5 = document.querySelector(&#039;#g5&#039;);
var g6 = document.querySelector(&#039;#g6&#039;);
var g7 = document.querySelector(&#039;#g7&#039;);      
    
var h0 = document.querySelector(&#039;#h0&#039;);
var h1 = document.querySelector(&#039;#h1&#039;);
var h2 = document.querySelector(&#039;#h2&#039;);
var h3 = document.querySelector(&#039;#h3&#039;);
var h4 = document.querySelector(&#039;#h4&#039;);
var h5 = document.querySelector(&#039;#h5&#039;);
var h6 = document.querySelector(&#039;#h6&#039;);
var h7 = document.querySelector(&#039;#h7&#039;);        
    
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&lt;&lt;7)+(rez_a1&lt;&lt;6)+(rez_a2&lt;&lt;5)+(rez_a3&lt;&lt;4)+(rez_a4&lt;&lt;3)+(rez_a5&lt;&lt;2)+(rez_a6&lt;&lt;1)+rez_a7;
   sum_b = (rez_b0&lt;&lt;7)+(rez_b1&lt;&lt;6)+(rez_b2&lt;&lt;5)+(rez_b3&lt;&lt;4)+(rez_b4&lt;&lt;3)+(rez_b5&lt;&lt;2)+(rez_b6&lt;&lt;1)+rez_b7;
   sum_c = (rez_c0&lt;&lt;7)+(rez_c1&lt;&lt;6)+(rez_c2&lt;&lt;5)+(rez_c3&lt;&lt;4)+(rez_c4&lt;&lt;3)+(rez_c5&lt;&lt;2)+(rez_c6&lt;&lt;1)+rez_c7;  
   sum_d = (rez_d0&lt;&lt;7)+(rez_d1&lt;&lt;6)+(rez_d2&lt;&lt;5)+(rez_d3&lt;&lt;4)+(rez_d4&lt;&lt;3)+(rez_d5&lt;&lt;2)+(rez_d6&lt;&lt;1)+rez_d7;  
   sum_e = (rez_e0&lt;&lt;7)+(rez_e1&lt;&lt;6)+(rez_e2&lt;&lt;5)+(rez_e3&lt;&lt;4)+(rez_e4&lt;&lt;3)+(rez_e5&lt;&lt;2)+(rez_e6&lt;&lt;1)+rez_e7;  
   sum_f = (rez_f0&lt;&lt;7)+(rez_f1&lt;&lt;6)+(rez_f2&lt;&lt;5)+(rez_f3&lt;&lt;4)+(rez_f4&lt;&lt;3)+(rez_f5&lt;&lt;2)+(rez_f6&lt;&lt;1)+rez_f7;  
   sum_g = (rez_g0&lt;&lt;7)+(rez_g1&lt;&lt;6)+(rez_g2&lt;&lt;5)+(rez_g3&lt;&lt;4)+(rez_g4&lt;&lt;3)+(rez_g5&lt;&lt;2)+(rez_g6&lt;&lt;1)+rez_g7;  
   sum_h = (rez_h0&lt;&lt;7)+(rez_h1&lt;&lt;6)+(rez_h2&lt;&lt;5)+(rez_h3&lt;&lt;4)+(rez_h4&lt;&lt;3)+(rez_h5&lt;&lt;2)+(rez_h6&lt;&lt;1)+rez_h7;        
   document.getElementById(&quot;rezz&quot;).innerHTML = &#039;{0b&#039;+rez_a0+&#039;&#039;+rez_a1+&#039;&#039;+rez_a2+&#039;&#039;+rez_a3+&#039;&#039;+rez_a4+&#039;&#039;+rez_a5+&#039;&#039;+rez_a6+&#039;&#039;+rez_a7+&#039;, 0b&#039;+rez_b0+&#039;&#039;+rez_b1+&#039;&#039;+rez_b2+&#039;&#039;+rez_b3+&#039;&#039;+rez_b4+&#039;&#039;+rez_b5+&#039;&#039;+rez_b6+&#039;&#039;+rez_b7+&#039;, 0b&#039;+rez_c0+&#039;&#039;+rez_c1+&#039;&#039;+rez_c2+&#039;&#039;+rez_c3+&#039;&#039;+rez_c4+&#039;&#039;+rez_c5+&#039;&#039;+rez_c6+&#039;&#039;+rez_c7+&#039;, 0b&#039;+rez_d0+&#039;&#039;+rez_d1+&#039;&#039;+rez_d2+&#039;&#039;+rez_d3+&#039;&#039;+rez_d4+&#039;&#039;+rez_d5+&#039;&#039;+rez_d6+&#039;&#039;+rez_d7+&#039;, 0b&#039;+rez_e0+&#039;&#039;+rez_e1+&#039;&#039;+rez_e2+&#039;&#039;+rez_e3+&#039;&#039;+rez_e4+&#039;&#039;+rez_e5+&#039;&#039;+rez_e6+&#039;&#039;+rez_e7+&#039;, 0b&#039;+rez_f0+&#039;&#039;+rez_f1+&#039;&#039;+rez_f2+&#039;&#039;+rez_f3+&#039;&#039;+rez_f4+&#039;&#039;+rez_f5+&#039;&#039;+rez_f6+&#039;&#039;+rez_f7+&#039;, 0b&#039;+rez_g0+&#039;&#039;+rez_g1+&#039;&#039;+rez_g2+&#039;&#039;+rez_g3+&#039;&#039;+rez_g4+&#039;&#039;+rez_g5+&#039;&#039;+rez_g6+&#039;&#039;+rez_g7+&#039;, 0b&#039;+rez_h0+&#039;&#039;+rez_h1+&#039;&#039;+rez_h2+&#039;&#039;+rez_h3+&#039;&#039;+rez_h4+&#039;&#039;+rez_h5+&#039;&#039;+rez_h6+&#039;&#039;+rez_h7+&#039;}&#039;;   
   document.getElementById(&quot;rezz1&quot;).innerHTML = &#039;{&#039;+sum_a+&#039;, &#039;+sum_b +&#039;, &#039;+sum_c+&#039;, &#039;+sum_d+&#039;, &#039;+sum_e+&#039;, &#039;+sum_f+&#039;, &#039;+sum_g+&#039;, &#039;+sum_h+&#039;}&#039;;
   document.getElementById(&quot;rezz2&quot;).innerHTML = &#039;{0x&#039;+ sum_a.toString(16) +&#039;, 0x&#039;+sum_b.toString(16)+&#039;, 0x&#039;+sum_c.toString(16)+&#039;, 0x&#039;+sum_d.toString(16)+&#039;, 0x&#039;+sum_e.toString(16)+&#039;, 0x&#039;+sum_f.toString(16)+&#039;, 0x&#039;+sum_g.toString(16)+&#039;, 0x&#039;+sum_h.toString(16)+&#039;}&#039;;}
  
 

&lt;/script&gt;    
&lt;/html&gt;		
    
    </code></pre></div>]]></content>
			<author>
				<name><![CDATA[liman324]]></name>
				<uri>http://forum.rcl-radio.ru/profile.php?id=2</uri>
			</author>
			<updated>2021-05-20T09:02:13Z</updated>
			<id>http://forum.rcl-radio.ru/viewtopic.php?pid=3603#p3603</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: checkbox]]></title>
			<link rel="alternate" href="http://forum.rcl-radio.ru/viewtopic.php?pid=3602#p3602" />
			<content type="html"><![CDATA[<p><span class="postimg"><img src="http://forum.rcl-radio.ru/uploads/images/2021/05/83c6bbcf9a3ce59093ab2c1d2757bc53.png" alt="http://forum.rcl-radio.ru/uploads/images/2021/05/83c6bbcf9a3ce59093ab2c1d2757bc53.png" /></span> </p><div class="codebox"><pre><code> &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ru&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;CSS - Стилизация чекбокса&lt;/title&gt;
  &lt;style&gt;
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: &#039;&#039;;
      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: &#039;&#039;;
      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: &#039;&#039;;
      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;}
  &lt;/style&gt;

&lt;/head&gt;

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

    
    


&lt;script&gt;

var c0 = document.querySelector(&#039;#a0&#039;);
var c1 = document.querySelector(&#039;#a1&#039;);
var c2 = document.querySelector(&#039;#a2&#039;);
var c3 = document.querySelector(&#039;#a3&#039;);
var c4 = document.querySelector(&#039;#a4&#039;);
var c5 = document.querySelector(&#039;#a5&#039;);
var c6 = document.querySelector(&#039;#a6&#039;);
var c7 = document.querySelector(&#039;#a7&#039;);    
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&lt;&lt;7)+(rez1&lt;&lt;6)+(rez2&lt;&lt;5)+(rez3&lt;&lt;4)+(rez4&lt;&lt;3)+(rez5&lt;&lt;2)+(rez6&lt;&lt;1)+rez7;    
   document.getElementById(&quot;rezz&quot;).innerHTML = &#039;0b&#039;+rez0+&#039;&#039;+rez1+&#039;&#039;+rez2+&#039;&#039;+rez3+&#039;&#039;+rez4+&#039;&#039;+rez5+&#039;&#039;+rez6+&#039;&#039;+rez7;    
   document.getElementById(&quot;rezz1&quot;).innerHTML = sum;
   document.getElementById(&quot;rezz2&quot;).innerHTML = &#039;0x&#039;+ sum.toString(16);}
   
&lt;/script&gt;    
&lt;/html&gt;			</code></pre></div>]]></content>
			<author>
				<name><![CDATA[liman324]]></name>
				<uri>http://forum.rcl-radio.ru/profile.php?id=2</uri>
			</author>
			<updated>2021-05-19T09:33:10Z</updated>
			<id>http://forum.rcl-radio.ru/viewtopic.php?pid=3602#p3602</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[Re: checkbox]]></title>
			<link rel="alternate" href="http://forum.rcl-radio.ru/viewtopic.php?pid=3566#p3566" />
			<content type="html"><![CDATA[<p><span class="postimg"><img src="http://forum.rcl-radio.ru/uploads/images/2021/05/85eaf45a1e8e533d34438648779f813b.png" alt="http://forum.rcl-radio.ru/uploads/images/2021/05/85eaf45a1e8e533d34438648779f813b.png" /></span> </p><div class="codebox"><pre><code>               
              &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ru&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;CSS - Стилизация чекбокса&lt;/title&gt;
  &lt;style&gt;
    /*-------------*/
.custom-checkbox {position: absolute;z-index: -1;opacity: 0;}
.custom-checkbox+label::before {
      margin: 0px 15px;
      content: &#039;&#039;;
      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: &#039;&#039;;
      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: &#039;&#039;;
      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;}
  &lt;/style&gt;

&lt;/head&gt;

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

&lt;/html&gt;							
														</code></pre></div>]]></content>
			<author>
				<name><![CDATA[liman324]]></name>
				<uri>http://forum.rcl-radio.ru/profile.php?id=2</uri>
			</author>
			<updated>2021-05-17T05:54:42Z</updated>
			<id>http://forum.rcl-radio.ru/viewtopic.php?pid=3566#p3566</id>
		</entry>
		<entry>
			<title type="html"><![CDATA[checkbox]]></title>
			<link rel="alternate" href="http://forum.rcl-radio.ru/viewtopic.php?pid=3565#p3565" />
			<content type="html"><![CDATA[<p><span class="attention-yellow"></span> <br /><span class="postimg"><img src="http://forum.rcl-radio.ru/uploads/images/2021/05/9e85b25eac63b4f49870ff1d9cdb6b9c.png" alt="http://forum.rcl-radio.ru/uploads/images/2021/05/9e85b25eac63b4f49870ff1d9cdb6b9c.png" /></span> </p><div class="codebox"><pre><code>              
              &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ru&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;title&gt;CSS - Стилизация чекбокса&lt;/title&gt;
  &lt;style&gt;
    /* для элемента input c type=&quot;checkbox&quot; */
    .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: &#039;&#039;;
      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;
    }
  &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;div class=&quot;checkbox&quot;&gt;
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a0&quot; name=&quot;a0&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
   &lt;label for=&quot;a0&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a1&quot; name=&quot;a1&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a1&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a2&quot; name=&quot;a2&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a2&quot;&gt;  &lt;/label&gt;

    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a3&quot; name=&quot;a3&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a3&quot;&gt;  &lt;/label&gt;
      
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a4&quot; name=&quot;a4&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a4&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a5&quot; name=&quot;a5&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a5&quot;&gt;  &lt;/label&gt;

    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a6&quot; name=&quot;a6&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a6&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a7&quot; name=&quot;a7&quot; value=&quot;1&quot; onFocus=&quot;this.blur()&quot;&gt;
    &lt;label for=&quot;a7&quot;&gt;  &lt;/label&gt;
  &lt;/div&gt;
    
      &lt;div class=&quot;checkbox&quot;&gt;
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a0&quot; name=&quot;a0&quot; value=&quot;indigo&quot;&gt;
   &lt;label for=&quot;a0&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a1&quot; name=&quot;a1&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a1&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a2&quot; name=&quot;a2&quot; value=&quot;1&quot; &gt;
    &lt;label for=&quot;a2&quot;&gt;  &lt;/label&gt;

    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a3&quot; name=&quot;a3&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a3&quot;&gt;  &lt;/label&gt;
      
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a4&quot; name=&quot;a4&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a4&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a5&quot; name=&quot;a5&quot; value=&quot;1&quot; &gt;
    &lt;label for=&quot;a5&quot;&gt;  &lt;/label&gt;

    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a6&quot; name=&quot;a6&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a6&quot;&gt;  &lt;/label&gt;
 
    &lt;input class=&quot;custom-checkbox&quot; type=&quot;checkbox&quot; id=&quot;a7&quot; name=&quot;a7&quot; value=&quot;1&quot;&gt;
    &lt;label for=&quot;a7&quot;&gt;  &lt;/label&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;							
						</code></pre></div>]]></content>
			<author>
				<name><![CDATA[liman324]]></name>
				<uri>http://forum.rcl-radio.ru/profile.php?id=2</uri>
			</author>
			<updated>2021-05-17T04:11:35Z</updated>
			<id>http://forum.rcl-radio.ru/viewtopic.php?pid=3565#p3565</id>
		</entry>
</feed>
