1. 首頁
  2. 問答
  3. HTML中的切換開關狀態列表

HTML中的切換開關狀態列表

2017-07-23 31 views
0

再一次，我不擅長編碼（我沒有經驗）。HTML中的切換開關狀態列表

但是，在這個例子中，我想獲得一個切換開關列表的狀態。

我成功地製作了交換機列表。我怎樣才能得到他們的狀態。更準確地說，我需要一個逗號分隔的按鈕1，按鈕2，按鈕5（當按鈕1，按鈕2 &按鈕5被選中時）分隔的檢查項目列表。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.switch { 
position: relative; 
display: inline-block; 
width: 60px; 
height: 34px; 
} 

.switch input {display:none;} 

.slider { 
position: absolute; 
cursor: pointer; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-color: #ccc; 
-webkit-transition: .4s; 
transition: .4s; 
} 

.slider:before { 
position: absolute; 
content: ""; 
height: 26px; 
width: 26px; 
left: 4px; 
bottom: 4px; 
background-color: white; 
-webkit-transition: .4s; 
transition: .4s; 
} 

input:checked + .slider { 
background-color: #2196F3; 
} 

input:focus + .slider { 
box-shadow: 0 0 1px #2196F3; 
} 

input:checked + .slider:before { 
-webkit-transform: translateX(26px); 
-ms-transform: translateX(26px); 
transform: translateX(26px); 
} 

/* Rounded sliders */ 
.slider.round { 
border-radius: 34px; 
} 

.slider.round:before { 
border-radius: 50%; 
} 
</style> 
</head> 
<body> 

<h2> 
    <center>Smartwatch Tasks Toggle</center> 
</h2> 


<table style="width:100%"> 

    <tr> 
    <td>Switch 1</td> 
    <td><label class="switch"> 
<id name="Switch 1"> 
<input type="checkbox" unchecked> 
<span class="slider round"></span> 
</label></td> 
    </tr> 

    <tr> 
    <td>Switch 2</td> 
    <td><label class="switch"> 
<id name="Switch 2"> 
<input type="checkbox" unchecked> 
<span class="slider round"></span> 
</label></td> 
    </tr> 

    <tr> 
    <td>Switch 3</td> 
    <td><label class="switch"> 
<id name="Switch 3"> 
<input type="checkbox" unchecked> 
<span class="slider round"></span> 
</label></td> 
    </tr> 

    <tr> 
    <td>Switch 4</td> 
    <td><label class="switch"> 
<id name="Switch 4"> 
<input type="checkbox" unchecked> 
<span class="slider round"></span> 
</label></td> 
    </tr> 

    <tr> 
    <td>Switch 5</td> 
    <td><label class="switch"> 
<id name="Switch 5"> 
<input type="checkbox" unchecked> 
<span class="slider round"></span> 
</label></td> 
    </tr> 


</table> 

<br><br> 
<button type="button" onclick="alert('Hello world!')">Save</button> 
<br><br> 
<button type="button" onclick="alert('Hello world!')">Cancel</button> 


</body> 
</html>

來源

2017-07-23 Alahdal

+0

你可以使用jQuery嗎？ –

回答

1

你可以用JavaScript來做到這一點。

首先，我建議給每個輸入指定的id S（即"Switch 1"，"Switch 2"，"Switch 3"，等等），這樣您就可以登錄他們。

然後你可以給你的按鈕分配一個功能來顯示選中的輸入。

HTML

<button type="button" onclick="showCheckedInputs()">Show Checked Switches</button>

的JavaScript

function showCheckedInputs() { 
    var checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
    var checkedInputs = []; 
    for (var i = 0; i < checkboxes.length; i++) { 
    if(checkboxes[i].checked) { 
     checkedInputs.push(checkboxes[i].id) 
    } 
    } 
    // log results to the console 
    console.log(checkedInputs); 
    // render results to the DOM 
    document.getElementById('result').innerHTML = checkedInputs.join(', '); 
}

這裏是一個Demo

P.S.你的交換機看起來非常酷！

來源

2017-07-23 15:45:50

1 
Try this: 
Change in html code 

     <table style="width:100%"> 

     <tr> 
     <td>Switch 1</td> 
     <td><label class="switch"> 
    <id name="Switch 1"> 
    <input type="checkbox" class="testClass" value="1" unchecked> 
    <span class="slider round"></span> 
    </label></td> 
     </tr> 

     <tr> 
     <td>Switch 2</td> 
     <td><label class="switch"> 
    <id name="Switch 2"> 
    <input type="checkbox" class="testClass" value="2" unchecked> 
    <span class="slider round"></span> 
    </label></td> 
     </tr> 

     <tr> 
     <td>Switch 3</td> 
     <td><label class="switch"> 
    <id name="Switch 3"> 
    <input type="checkbox" class="testClass" value="3" unchecked> 
    <span class="slider round"></span> 
    </label></td> 
     </tr> 

     <tr> 
     <td>Switch 4</td> 
     <td><label class="switch"> 
    <id name="Switch 4"> 
    <input type="checkbox" class="testClass" value="4" unchecked> 
    <span class="slider round"></span> 
    </label></td> 
     </tr> 

     <tr> 
     <td>Switch 5</td> 
     <td><label class="switch"> 
    <id name="Switch 5"> 
    <input type="checkbox" class="testClass" value="5" unchecked> 
    <span class="slider round"></span> 
    </label></td> 
     </tr> 


    </table> 

    Jquery Code: 

    var checkedVals = $('.testClass:checkbox:checked').map(function() { 
     return this.value; 
    }).get(); 
    alert(checkedVals.join(","));

來源

2017-07-23 14:47:20

1 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("input").change(function(){ 
 
    // alert( $('input:checkbox').attr('id')) 
 
    alert( $(this).attr('id')) 
 
    // $("#selectedVal").val($(this).attr('id')) 
 
    }); 
 
}); 
 
</script> 
 
<style> 
 
.switch { 
 
position: relative; 
 
display: inline-block; 
 
width: 60px; 
 
height: 34px; 
 
} 
 

 
.switch input {display:none;} 
 

 
.slider { 
 
position: absolute; 
 
cursor: pointer; 
 
top: 0; 
 
left: 0; 
 
right: 0; 
 
bottom: 0; 
 
background-color: #ccc; 
 
-webkit-transition: .4s; 
 
transition: .4s; 
 
} 
 

 
.slider:before { 
 
position: absolute; 
 
content: ""; 
 
height: 26px; 
 
width: 26px; 
 
left: 4px; 
 
bottom: 4px; 
 
background-color: white; 
 
-webkit-transition: .4s; 
 
transition: .4s; 
 
} 
 

 
input:checked + .slider { 
 
background-color: #2196F3; 
 
} 
 

 
input:focus + .slider { 
 
box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked + .slider:before { 
 
-webkit-transform: translateX(26px); 
 
-ms-transform: translateX(26px); 
 
transform: translateX(26px); 
 
} 
 

 
/* Rounded sliders */ 
 
.slider.round { 
 
border-radius: 34px; 
 
} 
 

 
.slider.round:before { 
 
border-radius: 50%; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2> 
 
    <center>Smartwatch Tasks Toggle</center> 
 
</h2> 
 

 

 
<table style="width:100%"> 
 

 
    <tr> 
 
    <td>Switch 1</td> 
 
    <td><label class="switch"> 
 
<id name="Switch 1"> 
 
<input type="checkbox" id="switch1" unchecked> 
 
<span class="slider round"></span> 
 
</label></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Switch 2</td> 
 
    <td><label class="switch"> 
 
<id name="Switch 2"> 
 
<input type="checkbox" id="switch2" unchecked> 
 
<span class="slider round"></span> 
 
</label></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Switch 3</td> 
 
    <td><label class="switch"> 
 
<id name="Switch 3"> 
 
<input type="checkbox" id="switch3" unchecked> 
 
<span class="slider round"></span> 
 
</label></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Switch 4</td> 
 
    <td><label class="switch"> 
 
<id name="Switch 4"> 
 
<input type="checkbox" id="switch4" unchecked> 
 
<span class="slider round"></span> 
 
</label></td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Switch 5</td> 
 
    <td><label class="switch"> 
 
<id name="Switch 5"> 
 
<input type="checkbox" id="switch5" unchecked> 
 
<span class="slider round"></span> 
 
</label></td> 
 
    </tr> 
 

 

 
</table> 
 

 
<br><br> 
 
<button type="button" onclick="alert('Hello world!')">Save</button> 
 
<br><br> 
 
<button type="button" onclick="alert('Hello world!')">Cancel</button> 
 

 

 

 
</body> 
 
</html>

我已經使用jQuery和上切換，你會得到在alert.Is值這個你問什麼？

來源

2017-07-23 14:55:50

相關問題

 相關問題