使復選框的行為類似於帶有 javascript 的單選按鈕
[英]make checkbox behave like radio buttons with javascript
問題描述
我需要使用 javascript 來操作復選框的行為。 它們基本上應該像單選按鈕（一次只能選擇一個，加上取消選擇任何先前的選擇）。
問題是我不能首先使用普通的單選按鈕，因為每個單選按鈕的名稱屬性會有所不同。
我知道它不是讓蘋果看起來像梨的終極和最閃亮的解決方案，w3c 不會給我他們的拇指，但它現在比改變整個 cms 的核心 php 邏輯更好的解決方案結構體;-）
任何幫助深表感謝！
11 個解決方案
解決方案1
84 已采納 2011-04-30 06:04:22
HTML：
<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>
jQuery：
$(".chb").change(function() {
$(".chb").prop('checked', false);
$(this).prop('checked', true);
});
如果您希望用戶可以取消選中所選項目：
$(".chb").change(function() {
$(".chb").not(this).prop('checked', false);
});
演示：
解決方案2
6 2011-04-30 06:06:10
有很多方法可以做到這一點。 這是一個包含多個復選框的 div 的 clickhandler ( plain js )：
function cbclick(e){
e = e || event;
var cb = e.srcElement || e.target;
if (cb.type !== 'checkbox') {return true;}
var cbxs = document.getElementById('radiocb')
.getElementsByTagName('input'),
i = cbxs.length;
while(i--) {
if (cbxs[i].type
&& cbxs[i].type == 'checkbox'
&& cbxs[i].id !== cb.id) {
cbxs[i].checked = false;
}
}
}
這是一個工作示例。
解決方案3
5 2014-02-07 16:54:32
我保持簡單...
<html>
<body>
<script>
function chbx(obj)
{
var that = obj;
if(document.getElementById(that.id).checked == true) {
document.getElementById('id1').checked = false;
document.getElementById('id2').checked = false;
document.getElementById('id3').checked = false;
document.getElementById(that.id).checked = true;
}
}
</script>
<form action="your action" method="post">
<Input id='id1' type='Checkbox' Name ='name1' value ="S" onclick="chbx(this)"><br />
<Input id='id2' type='Checkbox' Name ='name2' value ="S" onclick="chbx(this)"><br />
<Input id='id3' type='Checkbox' Name ='name3' value ="S" onclick="chbx(this)"><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
解決方案4
5 2014-06-18 13:22:51
這是一個更好的選擇，因為它還允許取消選中：
$(".cb").change(function () {
$(".cb").not(this).prop('checked', false);
});
解決方案5
4 2019-12-18 15:55:38
@DJafari 的回答不允許取消選中該復選框。 所以我像這樣更新了它：
$(".chb").change(function(e) {
//Getting status before unchecking all
var status = $(this).prop("checked");
$(".chb").prop('checked', false);
$(this).prop('checked', true);
//false means checkbox was checked and became unchecked on change event, so let it stay unchecked
if (status === false) {
$(this).prop('checked', false);
}
});
解決方案6
3 2018-07-27 08:05:15
以防萬一它幫助別人
我遇到了同樣的情況，我的客戶需要一個類似於radio button的checkbox 。 但對我來說，使用checkbox並使其像radio button一樣毫無意義，而且對我來說非常復雜，因為我在GridView控件中使用了如此多的checkboxes 。
我的解決方案：
因此，我將radio button設置為類似於checkbox的樣式，並借助單選按鈕grouping 。
解決方案7
1 2011-04-30 06:09:09
您可以為您需要的復選框組提供一個常見的 class，然后使用 class 附加以下事件處理程序：
function clickReset ()
{
var isChecked = false,
clicked = $(this),
set = $('.' + clicked.attr ('class') + ':checked').not (clicked);
if (isChecked = clicked.attr ('checked'))
{
set.attr ('checked', false);
}
return true;
}
$(function ()
{
$('.test').click (clickReset);
});
注意：這很漂亮，我只是從臀部射擊，我沒有測試過它，它可能需要調整才能工作。
如果可以的話，我建議您確實考慮找到一種使用單選按鈕執行此操作的方法，因為收音機是完成這項工作的合適工具。 用戶希望復選框的行為類似於復選框，而不是收音機，如果他們關閉 javascript，他們可以強制輸入您不期望的服務器端腳本。
編輯：修復了 function 以便取消選中正常工作並添加了 JS Fiddle 鏈接。
解決方案8
0 2013-11-13 20:44:48
在簡單的 JS 中。 享受 ！
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function onChoiceChange(obj) {
// Get Objects
var that=obj,
triggerChoice = document.getElementById(that.id),
domChoice1 = document.getElementById("Choice1"),
domChoice2 = document.getElementById("Choice2");
// Apply
if (triggerChoice.checked && triggerChoice.id === "Choice1")
domChoice2.checked=false;
if (triggerChoice.checked && triggerChoice.id === "Choice2")
domChoice1.checked=false;
// Logout
var log = document.getElementById("message");
log.innerHTML += "<br>"+ (domChoice1.checked ? "1" : "0") + ":" + (domChoice2.checked ? "1" : "0");
// Return !
return that.checked;
}
</script>
</head>
<body>
<h1 id="title">Title</h1>
<label><input type="checkbox" onclick="onChoiceChange(this)" id="Choice1" />Choice #1</label>
<label><input type="checkbox" onclick="onChoiceChange(this)" id="Choice2" />Choice #2</label>
<hr>
<div id="message"></div>
</body>
</html>
解決方案9
0 2015-04-26 10:17:42
嘗試這個
<form id="form" action="#">
<input name="checkbox1" type="checkbox" />
<input name="checkbox2" type="checkbox" />
<input name="checkbox3" type="checkbox" />
<input name="checkbox4" type="checkbox" />
<input name="checkbox5" type="checkbox" />
<input name="checkbox6" type="checkbox" />
<input name="checkbox7" type="checkbox" />
<input name="checkbox8" type="checkbox" />
<input name="checkbox9" type="checkbox" />
<input name="checkbox10" type="checkbox" />
<input type="submit" name="submit" value="submit"/>
</form>
這是 javascript
(function () {
function checkLikeRadio(tag) {
var form = document.getElementById(tag);//selecting the form ID
var checkboxList = form.getElementsByTagName("input");//selecting all checkbox of that form who will behave like radio button
for (var i = 0; i < checkboxList.length; i++) {//loop thorough every checkbox and set there value false.
if (checkboxList[i].type == "checkbox") {
checkboxList[i].checked = false;
}
checkboxList[i].onclick = function () {
checkLikeRadio(tag);//recursively calling the same function again to uncheck all checkbox
checkBoxName(this);// passing the location of selected checkbox to another function.
};
}
}
function checkBoxName(id) {
return id.checked = true;// selecting the selected checkbox and maiking its value true;
}
window.onload = function () {
checkLikeRadio("form");
};
})();
解決方案10
0 2016-04-09 15:20:40
我喜歡DAVOOD 對這個問題的回答，但它依賴於復選框上的類，這是不需要的。
由於復選框往往是相關的，因為它們將具有相同的（字段）名稱，或者使它們成為數組一部分的名稱，因此使用它來決定取消選中哪些其他復選框將是一個更好的解決方案。
$(document)
.on('change','input[type="checkbox"]',function(e){
var $t = $(this);
var $form = $t.closest('form');
var name = $t.attr('name');
var selector = 'input[type="checkbox"]';
var m = (new RegExp('^(.+)\\[([^\\]]+)\\]$')).exec( name );
if( m ){
selector += '[name^="'+m[1]+'["][name$="]"]';
}else{
selector += '[name="'+name+'"]';
}
$(selector, $form).not($t).prop('checked',false);
});
解決方案11
0 2011-04-30 06:20:59
<html>
<body>
<form action="#" method="post">
Radio 1: <input type="radio" name="radioMark" value="radio 1" /><br />
Radio 2: <input type="radio" name="radioMark" value="radio 2" /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
最終，您可以使用帶有 name 屬性的括號來創建一個無線電輸入數組，如下所示：
<input type="radio" name="radioMark[]" value="radio1" />Radio 1
<input type="radio" name="radioMark[]" value="radio2" />Radio 2
<input type="radio" name="radioMark[]" value="radio3" />Radio 3
<input type="radio" name="radioMark[]" value="radio4" />Radio 4
最終要轉移的是 value 屬性中的內容。 每個單選按鈕的名稱不必完全不同。 希望有幫助。
如何使Leaflet圖層控件中的復選框的行為類似於單選按鈕
[英]How to make checkboxes in Leaflet layers control behave like radio buttons
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.