帶有radiobutton功能的復選框
[英]Check box with radiobutton functionality
問題描述
<style>
.chb
{
width: 30px;
}
</style>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script>
$(".chb").each(function() {
$(this).change(function() {
$(".chb").attr('checked',false);
$(this).attr('checked',true);
});
});
</script>
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" value="Bike" class ="chb"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb"> I have a car <br>
</form>
上述編碼包含兩個帶單選按鈕功能的復選框。 這很好用。 但是如何使用javascript而不使用jquery來做到這一點。 如何實現這一目標。
5 個解決方案
解決方案1
4 已采納 2012-11-24 05:34:50
如果您只關心功能而且您有很多復選框，這是一個簡單的解決方案。
<script>
function func(checkBox) {
var inputs = document.getElementsByTagName("input");
for(var j = 0; j < inputs.length; j++) {
if(inputs[j].type == "checkbox" && (inputs[j].className == "chb")){
inputs[j].checked = false;
}
}
checkBox.checked = true;
}
</script>
現在將onclick事件添加到所有復選框，如下所示。
<input type="checkbox" name="vehicle" value="Bike" class ="chb" onclick="func(this);"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb" onclick="func(this);"> I have a car <br>
解決方案2
3 2012-11-24 05:38:36
我假設你只需要這個功能用於類名chb輸入。 否則將需要更多的循環。
與此處提到的其他解決方案不同，我的代碼不需要為每個復選框添加onclick ：
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<title> My page </title>
<script>
function doCrazyCheckRadioThing(v) {
var checkboxes, i;
for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
checkboxes[i].checked = (checkboxes[i].value === v);
}
}
function init() {
var checkboxes, i;
for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) {
checkboxes[i].addEventListener('change', function() {
doCrazyCheckRadioThing(this.value);
}, false);
}
}
document.addEventListener('DOMContentLoaded', init, false);
</script>
<body>
<form action="demo_form.asp">
<input type="checkbox" name="vehicle" id='bike' value="Bike" class="chb"> I have a bike<br>
<input type="checkbox" name="vehicle" id='car' value="Car" checked="checked" class="chb"> I have a car <br>
</form>
我必須再次強調，這是一種非語言的HTML編碼方式 。
解決方案3
3 2012-11-24 05:43:37
也許，你可以吃蛋糕，也可以吃。 如果這只是外觀並且您可以考慮使用CSS解決方案，那么您可以在代碼中使用單選按鈕，並使其看起來像是復選框。
input[type="radio"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
}
不需要javascript或jQuery。 但是，我還沒有測試過跨瀏覽器的友好性。 絕對適用於Chrome和Firefox。 絕對不適用於IE
解決方案4
2 2012-11-24 05:29:35
細節：可能不是最優雅的代碼，但它會做到這一點，並會給你如何根據自己的目的定制它的想法
<input type="checkbox" name="chkFirst" onclick="CheckboxCheck('first')" />
<input type="checkbox" name="chkSecond" onclick="CheckboxCheck('second')" />
<script>
function CheckboxCheck(checkbox)
{
var firstCheckbox = document.getElementById('chkFirst');
var secondCheckbox = document.getElementById('chkSecond');
if (checkbox == "first")
{
if (secondCheckbox.checked && firstCheckbox.checked == true)
{
secondCheckbox.checked = false;
}
}
else
{
if (firstCheckbox.checked && secondCheckbox.checked == true)
{
firstCheckbox.checked = false;
}
}
}
</script>
解決方案5
0 2019-03-12 21:15:44
那么@prageeth代碼運行良好，除了優化之外的所有代碼都只是檢索第一行代碼中的復選框，這樣你就不必檢查循環中的兩個東西，我想這會節省一些性能時間。
我甚至沒有在循環中使用任何條件就找到了更好的方法。 這個答案是編輯..
<script>
function func(checkBox) {
var inputs = document.querySelectorAll("[type=checkbox], [class=chb]");
for(var j = 0; j < inputs.length; j++) {
inputs[j].checked = false;
}
checkBox.checked = true;
}
</script>
如何僅對Chekc框列表實施一個復選框選中的功能？
[英]How to implement only one check box selected functionality to Chekc box list?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.