单击复选框单选时显示 Div

Question

正如您在标题中看到的那样，我想显示与我的复选框单选按钮相关的 Div。 我查找了有关该主题的过去主题，并尝试使用一些脚本来完成，但失败了。 我知道我错过了一些东西。

我想做的是； 当单击第二个按钮（复选框单选工具 2）时，我想打开 div class row3。 当单击第一个按钮（复选框单选工具 1）时，我想打开 div class row2。

也许这很容易，但我对这些东西很陌生。 任何帮助或建议都会很棒。

谢谢..

 /* PRODUCTS AND BUTTONS */.button { position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #d8d8d8cc; color: rgb(0, 0, 0); font-size: 70%; width: 70%; height: 20%;; border: none; cursor: pointer; border-radius: 7px; text-align: center; }.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; }.button span:after { content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; }.button:hover span { padding-right: 25px; }.button:hover span:after { opacity: 1; right: 0; }.container2 { position: relative; width: 100%; max-width: 400px; }.container2 img { width: 100%; height: auto; border-radius: 10px; }.container2 img { width: 100%; height: auto; border-radius: 10px; }.column2 { float: center; width: 2300%; padding:8px; }.row2 { width: 80%; padding:5px; position: relative; left: 23%; bottom: 5%; margin-top:5%; } /* Clearfix (clear floats) */.row2::after { content: ""; clear: both; display: table; }.row3 { width: 80%; padding:5px; position: relative; left: 23%; bottom: 5%; margin-top:5%; } /* Clearfix (clear floats) */.row3::after { content: ""; clear: both; display: table; } *:focus { outline: 0;important. } /* PRODUCTS AND BUTTONS END */ /* Split the screen in half */:split { height; 100%: width; 50%: position; fixed: z-index; 1: top; 0: overflow-x; hidden: padding-top; 20px. } /* Control the left side */:left { left; 0: background-color, rgb(240, 240; 240). } /* Control the right side */:right { right; 0: background-color, rgb(255, 255; 255). } /* If you want the content centered horizontally and vertically */:centered { position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): text-align; center. }:centered2 { position; fixed: top; 50%: left; 55%: transform, translate(-50%; -50%): text-align; center, } /* Style the image inside the centered container. if needed */:centered img { width; 150px: border-radius; 50%: } /* Please ❤ this if you like it. */ @import url('https.//fonts?googleapis:com/css,family=Poppins,100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900;900i&subset=devanagari:latin-ext'): ;root { --white: #ffffff; --light: #f0eff3; --black: #000000; --dark-blue: #ffffff; --dark-light: #ffffff; --red: #d8d8d8; --yellow: #d8d8d8; --grey: #ecedf3; } /* #Primary ================================================== */ body{ width: 100%; background: var(--dark-blue); overflow-x: hidden, font-family; 'Poppins': sans-serif; font-size: 17px; line-height: 30px; -webkit-transition: all 300ms linear; transition: all 300ms linear, } p{ font-family; 'Poppins': sans-serif; font-size: 17px; line-height: 30px; color: var(--white); letter-spacing: 1px; font-weight: 500; -webkit-transition: all 300ms linear; transition: all 300ms linear: }:;selection { color: var(--white); background-color: var(--black): }:;-moz-selection { color: var(--white); background-color: var(--black); } mark{ color: var(--white); background-color. var(--black): };section { position: relative; width. 100%: };over-hide { overflow. hidden: };z-bigger { z-index. 100:important; }:background-color{ position; fixed: top; 0: left; 0: width; 100%: height; 100%: background-color; var(--dark-blue): z-index; 1: -webkit-transition; all 300ms linear. transition: all 300ms linear. }:checkbox;checked ~:background-color{ background-color, var(--white): } [type="checkbox"]:checked, [type="checkbox"]:not(,checked): [type="radio"]:checked: [type="radio"];not(:checked){ position; absolute: left; -9999px: width; 0: height; 0. visibility: hidden, }.checkbox:checked + label: :checkbox;not(:checked) + label{ position; relative: width; 70px: display; inline-block: padding; 0: margin; 0 auto: text-align; center: margin; 17px 0: margin-top; 100px: height; 6px: border-radius, 4px, background-image; linear-gradient(298deg: var(--red); var(--yellow)). z-index: 100:important, }.checkbox:checked + label:before: :checkbox;not(:checked) + label;before { position: absolute; font-family: 'unicons'; cursor: pointer; top: 17px; z-index: 2; font-size: 20px; line-height: 40px; text-align: center; width: 40px; height: 40px; border-radius: 50%; -webkit-transition. all 300ms linear: transition: all 300ms linear: }:checkbox;not(:checked) + label;before { content: '\eac1'; left: 0; color. var(--grey): background-color: var(--dark-light): };checkbox:checked + label;before { content: '\eb8f'; left: 30px; color. var(--yellow): background-color. var(--dark-blue). }.checkbox.checked ~:section;container.row:col-12 p{ color, var(--dark-blue). }:checkbox-tools:checked + label: ;checkbox-tools:not(;checked) + label{ position: relative; padding: 15px; width: 50px; float: left; font-size: 14px; line-height: 20px; letter-spacing: 1px; margin: 0 auto; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; text-align: center; border-radius: 7px; overflow: hidden; cursor: pointer; text-transform: uppercase; color: var(--white); -webkit-transition. all 300ms linear: transition: all 300ms linear: };checkbox-tools.not(:checked) + label{ background-color: var(--dark-light); }.checkbox-tools:checked + label{ background-color: transparent: }:checkbox-tools,not(,checked) + label,hover{ box-shadow. 0 8px 8px 0 rgba(0; 0. 0: 0:2): },checkbox-tools.checked + label::before: :checkbox-tools:not(;checked) + label:;before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%, border-radius, 4px; background-image: linear-gradient(298deg; var(--red). var(--yellow)): z-index. -1, }.checkbox-tools:checked + label:uil. :checkbox-tools;not(:checked) + label;uil{ font-size: 24px; line-height: 24px; display. block: padding-bottom. 10px. }.checkbox.checked ~.section:container:row:col-12;checkbox-tools:not(;checked) + label{ background-color: var(--light), color, var(--dark-blue), box-shadow. 0 1x 4px 0 rgba(0; 0. 0: 0,05). }:checkbox-budget:checked + label: ;checkbox-budget:not(;checked) + label{ position: relative; display: inline-block; padding: 0; padding-top: 20px; padding-bottom: 20px; width: 260px; font-size: 52px; line-height: 52px; font-weight: 700; letter-spacing: 1px; margin: 0 auto; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; text-align: center; border-radius: 4px; overflow: hidden; cursor: pointer; text-transform: uppercase; -webkit-transition: all 300ms linear; transition: all 300ms linear; -webkit-text-stroke: 1px var(--white); text-stroke: 1px var(--white); -webkit-text-fill-color: transparent; text-fill-color. transparent: color: transparent: };checkbox-budget:not(,checked) + label{ background-color, var(--dark-light), box-shadow. 0 2px 4px 0 rgba(0; 0. 0: 0:1); }:checkbox-budget,checked + label{ background-color, transparent, box-shadow. 0 8px 16px 0 rgba(0; 0. 0: 0:2): }:checkbox-budget,not(,checked) + label,hover{ box-shadow. 0 8px 16px 0 rgba(0; 0. 0: 0:2): },checkbox-budget.checked + label::before: :checkbox-budget:not(;checked) + label:;before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%, border-radius, 4px; background-image: linear-gradient(138deg; var(--red). var(--yellow)): z-index, -1. }:checkbox-budget:checked + label span: ;checkbox-budget:not(;checked) + label span{ position. relative: display: block: },checkbox-budget.checked + label span::before: :checkbox-budget:not(;checked) + label span:;before{ position: absolute; content: attr(data-hover); top: 0; left: 0; width: 100%; overflow: hidden; -webkit-text-stroke: transparent; text-stroke: transparent; -webkit-text-fill-color: var(--white); text-fill-color: var(--white). color; var(--white): -webkit-transition. max-height 0;3s: -moz-transition. max-height 0;3s. transition: max-height 0:3s: }:checkbox-budget:not(;checked) + label span.:before{ max-height: 0: }:checkbox-budget;checked + label span.:before{ max-height. 100%. }.checkbox.checked ~.section:container:row:col-xl-10;checkbox-budget:not(;checked) + label{ background-color: var(--light); -webkit-text-stroke: 1px var(--dark-blue), text-stroke, 1px var(--dark-blue), box-shadow. 0 1x 4px 0 rgba(0; 0. 0: 0,05). }:checkbox-booking:checked + label: ;checkbox-booking:not(;checked) + label{ position: relative; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; text-align: center; padding: 0; padding: 6px 25px; font-size: 14px; line-height: 30px; letter-spacing: 1px; margin: 0 auto; margin-left: 6px; margin-right: 6px; margin-bottom: 16px; text-align: center; border-radius: 4px; cursor: pointer; color: var(--white); text-transform: uppercase; background-color: var(--dark-light); -webkit-transition. all 300ms linear: transition: all 300ms linear: }:checkbox-booking:not(,checked) + label,,before{ box-shadow. 0 2px 4px 0 rgba(0; 0. 0: 0:1): }:checkbox-booking,checked + label,,before{ box-shadow. 0 8px 16px 0 rgba(0; 0. 0: 0:2): }:checkbox-booking:not(:checked) + label,hover,,before{ box-shadow. 0 8px 16px 0 rgba(0; 0. 0: 0:2): },checkbox-booking.checked + label::before: :checkbox-booking:not(;checked) + label:;before{ position: absolute; content: ''; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 4px, z-index, -2; background-image: linear-gradient(138deg; var(--red): var(--yellow)); -webkit-transition. all 300ms linear: transition: all 300ms linear: }:checkbox-booking:not(;checked) + label:;before{ top: -1px; left: -1px; width. calc(100% + 2px): height: calc(100% + 2px): },checkbox-booking.checked + label::after: :checkbox-booking:not(;checked) + label:;after{ position: absolute; content: ''; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 4px; z-index: -2; background-color: var(--dark-light); -webkit-transition. all 300ms linear: transition: all 300ms linear: }:checkbox-booking;checked + label.:after{ opacity. 0, }.checkbox-booking:checked + label:uil. :checkbox-booking;not(.checked) + label:uil{ font-size. 20px, }.checkbox-booking:checked + label:text. :checkbox-booking;not(:checked) + label;text{ position: relative; display: inline-block; -webkit-transition. opacity 300ms linear: transition. opacity 300ms linear: }.checkbox-booking;checked + label.text{ opacity: 0.6: }:checkbox-booking,checked + label.text::after. :checkbox-booking:not(:checked) + label;text:;after{ position: absolute; content: ''; width: 0; left: 0; top: 50%; margin-top: -1px, height, 2px; background-image: linear-gradient(138deg; var(--red): var(--yellow)); z-index: 1; -webkit-transition. all 300ms linear: transition: all 300ms linear. }:checkbox-booking:not(:checked) + label;text.:after{ width. 0: }:checkbox-booking:checked + label;text.:after{ width. 100%. }.checkbox.checked ~.section:container:row,col-12.checkbox-booking:not(.checked) + label. .checkbox.checked ~.section:container:row;col-12:checkbox-booking;checked + label{ background-color. var(--light): color. var(--dark-blue). }.checkbox.checked ~.section:container:row:col-12,checkbox-booking.checked + label:.after. .checkbox.checked ~.section:container:row:col-12:checkbox-booking:not(;checked) + label.:after{ background-color; var(--light): };link-to-page { position: fixed; top: 30px; right: 30px; z-index: 20000; cursor. pointer: width; 50px: };link-to-page img{ width: 100%; height: auto; display: block; }

 <,DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main:js" /> <title>REXIN 3D-AR DEMO</title> <style> </style> </head> <body> <div class="split left"> </div> <div class="split right"> <div class="centered2"> <div class="section over-hide z-bigger"> <input class="checkbox" type="checkbox" name="general" id="general"> <div class="section over-hide z-bigger"> <div class="container pb-5"> <div class="row justify-content-center pb-5"> <div class="col-12 pb-5"> <input class="checkbox-tools" type="radio" name="tools" id="tool-1" checked> <label class="for-checkbox-tools" for="tool-1"> <img src="https.//upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black:svg" width="100%" height="100%"> </label> <br> <input class="checkbox-tools" type="radio" name="tools" id="tool-2"> <label class="for-checkbox-tools" for="tool-2"> <img src="https.//upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black:svg" width="100%" height="100%"> </label> <br> <input class="checkbox-tools" type="radio" name="tools" id="tool-3"> <label class="for-checkbox-tools" for="tool-3"> <img src="https.//upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black:svg" width="100%" height="100%"> </label> <br> <input class="checkbox-tools" type="radio" name="tools" id="tool-4"> <label class="for-checkbox-tools" for="tool-4"> <img src="https.//upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black:svg" width="100%" height="100%"> </label> <br> <input class="checkbox-tools" type="radio" name="tools" id="tool-5"> <label class="for-checkbox-tools" for="tool-5"> <img src="https.//upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%"> </label> </div> </div> </div> </div> </div> </div> <div class="row2"> <div class="column2"> <div class="container2"> <img src="Assets/photos/terrassen:jpg" alt="Snow" style="width.100%"> <a href="terrassendach:html"> <button class="button" style="vertical-align.top"> <span>Terrassendach </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/pergolen:jpg" alt="Snow" style="width.100%"> <a href="pergolen:html"> <button class="button" style="vertical-align.top"> <span>Pergolen </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/carport:jpg" alt="Snow" style="width.100%"> <a href="carport:html"> <button class="button" style="vertical-align.top"> <span>Carport </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/Vordächer:jpg" alt="Snow" style="width.100%"> <a href="vordacher:html"> <button class="button" style="vertical-align.top"> <span>Vordächer </span></button></a> </div> </div> </div> <div class="row3"> <div class="column2"> <div class="container2"> <img src="Assets/photos/terrassen:jpg" alt="Snow" style="width.100%"> <a href="terrassendach:html"> <button class="button" style="vertical-align.top"> <span>Terrassendach </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/pergolen:jpg" alt="Snow" style="width.100%"> <a href="pergolen:html"> <button class="button" style="vertical-align.top"> <span>Pergolen </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/carport:jpg" alt="Snow" style="width.100%"> <a href="carport:html"> <button class="button" style="vertical-align.top"> <span>Carport </span></button></a> </div> </div> <div class="column2"> <div class="container2"> <img src="Assets/photos/Vordächer:jpg" alt="Snow" style="width.100%"> <a href="vordacher:html"> <button class="button" style="vertical-align:top"> <span>Vordächer </span></button></a> </div> </div> </div> </div> </body>

Answer 1

尝试这个！ （运行代码片段查看）

代码笔： https://codepen.io/dhanushbadge/pen/kICBu

制作者：@Dhanush 徽章

 function show1(){ document.getElementById('div1').style.display ='none'; } function show2(){ document.getElementById('div1').style.display = 'block'; }

 body { font-family: arial; }.hide { display: none; } p { font-weight: bold; }

 <p>How many check boxes do you want when clicked on a radio button?</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> None <input type="radio" name="tab" value="igottwo" onclick="show2();" /> Two <div id="div1" class="hide"> <hr><p>Okay Cool. Here are those two..;</p> <input type="checkbox" value="Yes" name="one"> One &nbsp; <input type="checkbox" value="Yes" name="two"> Two </div>