input radio

input radio/Checkboxes 選擇框

<label class="container"> <input type="radio" name="S1" checked >One</label><br> <label class="container"> <input type="radio" name="S1">Two</label><br> <label class="container"> <input type="radio" name="S1">Three</label><br> <label class="container"> <input type="radio" name="S1">Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> checked>One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<label class="container"> <input type="radio" checked >One</label><br> <label class="container"> <input type="radio" >Two</label><br> <label class="container"> <input type="radio" >Three</label><br> <label class="container"> <input type="radio" >Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="radio" checked>One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

You select <span id="dp">?</span> <br> <label class="container"> <input type="radio" name="S1" value="1" >1</label> <label class="container"> <input type="radio" name="S1" value="2">2</label> <label class="container"> <input type="radio" name="S1" value="3">3</label> <label class="container"> <input type="radio" name="S1" value="4">4</label> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { //true false round.checked=false;return round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) </script> <pre> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) <</c>/script> </pre> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } </style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

You select <span id="dp1"> 1 </span> <span id="dp2"> 2 </span> <span id="dp3"> 3 </span> <span id="dp4"> 4 </span> <br> <label class="container"> <input type="radio" value="1" >1</label> <label class="container"> <input type="radio" value="2">2</label> <label class="container"> <input type="radio" value="3">3</label> <label class="container"> <input type="radio" value="4">4</label> <script> dp1.style.opacity=0.3; dp2.style.opacity=0.3; dp3.style.opacity=0.3; dp4.style.opacity=0.3; dp1.style.textDecoration = "line-through"; dp2.style.textDecoration = "line-through"; dp3.style.textDecoration = "line-through"; dp4.style.textDecoration = "line-through"; var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { var TT =document.getElementById("dp"+round.value) ; if(TT.style.opacity == 0.3){ TT.style.opacity=1; TT.style.textDecoration = "initial"; } else{ TT.style.opacity=0.3; round.checked=false ; TT.style.textDecoration = "line-through"; } }) }) </script> <pre> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { var TT =document.getElementById("dp"+round.value) ; if(TT.style.opacity == 0.3){ TT.style.opacity=1; TT.style.textDecoration = "initial"; } else{ TT.style.opacity=0.3; round.checked=false ; TT.style.textDecoration = "line-through"; } }) }) <</c>/script> </pre> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } #dp1 ,#dp2 ,#dp3 ,#dp4 { padding-left: 20px; text-decoration : LINE-THROUGH; opacity:0.3} </style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

input radio/Checkboxes 選擇框

Edit

#html #網頁格式 #script #style #div #html input radio #html 選擇框