我有一個無線電輸入組。如果一個收音機被選中，我再次點擊它變得沒有選中。使用javascript檢查/取消選中無線電輸入
有沒有辦法獲得無線電onClick事件的先前狀態？
<input name="options" type="radio" onClick="resetMeIfChecked()">
<input name="options" type="radio" onClick="resetMeIfChecked()">
<input name="options" type="radio" onClick="resetMeIfChecked()">
此行爲不是預期的單選按鈕，我不推薦它。試着找到實現這一目標的另一種方式。使用其他窗口或其他選項中重新設置字段值：
jQuery的版本
// bind to retrieve old status
$('input[type="radio"]').mousedown(function() {
// if it was checked before
if(this.checked) {
// bind event to reset state after click is completed
$(this).mouseup(function() {
// bind param, because "this" will point somewhere else in setTimeout
var radio = this;
// apparently if you do it immediatelly, it will be overriden, hence wait a tiny bit
setTimeout(function() {
radio.checked = false;
}, 5);
// don't handle mouseup anymore unless bound again
$(this).unbind('mouseup');
});
}
});
但同樣，這不是單選按鈕打算如何使用。我想你會更好地與一組checkbox'es在那裏你可以取消所有其他複選框比當前點擊（因此總是最多1個選擇）
試試這個：
function resetMeIfChecked(radio){
if(radio.checked && radio.value == window.lastrv){
$(radio).removeAttr('checked');
window.lastrv = 0;
}
else
window.lastrv = radio.value;
}
<input value="1" name="options" checked="checked" type="radio" onClick="resetMeIfChecked(this)" />A
<input value="2" name="options" type="radio" onClick="resetMeIfChecked(this)" />B
<input value="3" name="options" type="radio" onClick="resetMeIfChecked(this)" />C
它很簡單。只要按照這個簡單的例子，
var rdblength=document.formname.elementname.length;
alert('length='+rdblength);
for(i=0;i<rdblength;i++){
document.formname.elementname[i].checked=false;
}
只要找到長度，並使每個索引checked = true/false。
如果你想讓它簡單，不會介意使用雙擊事件嘗試這樣的事：
<input name="options" type="radio" ondblclick="this.checked=false;">
我有同樣的問題並找出答案。上述答案沒有一個完全按照我想要的方式工作 - 其中大多數需要額外的按鈕來重置收音機。目標是通過點擊收音機本身取消收音機。
這裏的小提琴：http://jsfiddle.net/MEk5Q/1/
問題是非常複雜的，因爲單選按鈕價值變動click事件觸發之前，所以當我們聽事件，如果單選按鈕已被選中，我們無法分辨或不。在這兩種情況下，它都已被檢查。 另一種方法是收聽mousedown事件。與click不同，它會在更改無線電checked屬性之前觸發，但在事件處理程序內部取消選中它之後，將不會觸發任何操作，因爲在mouseup事件期間再次檢查它。
我的答案是一個有點醜陋的解決方法，所以我通常不會向其他人推薦它，我可能會自己放棄它。 它的工作原理但它涉及20ms超時功能，我不喜歡在這種情況下。
下面是代碼的解釋：
$('input[type="radio"]').on('mousedown', function() {
if (this.checked) { //on mousedown we can easily determine if the radio is already checked
this.dataset.check = '1'; //if so, we set a custom attribute (in DOM it would be data-check="1")
}
}).on('mouseup', function() {
if (this.dataset.check) { //then on mouseup we determine if the radio was just meant to be unchecked
var radio = this;
setTimeout(function() {radio.checked = false;}, 20); //we give it a 20ms delay because radio checking fires right after mouseup event
delete this.dataset.check; //get rid of our custom attribute
}
});
由於超時功能，我可以用一個字符串（少寫），但據我所知，這將是eval「版。儘管我不信任eval函數，但我更喜歡匿名函數。
還有一件事 - 有人可能會問爲什麼將代碼分散到兩個單獨的事件處理程序中，而我們可以在mousedown上觸發超時功能？好吧，如果有人在收音機上按下鼠標並持有它幾秒鐘，甚至有人只是一個非常緩慢的人）。通常，利用這種解決方案，我們省略了mousedown和mouseup之間的滯後問題。
如果您需要了解dataset一些更多的信息，這裏的MDN參考： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset 此屬性來了HTML5，並且可能不跨瀏覽器，我猜，所以如果你想100％的兼容性，與其他任何代替它將包含數據的解決方案，您將其命名。
對不起，jQuery在這裏和那裏，但我希望你很好 - 它是這樣更容易。
希望你會喜歡它。
只有評論我發現迄今爲止，說明收音機立即檢查，謝謝。 – Saltire 2018-03-08 13:36:18
我從來沒有因爲被迫瞄準那個小小的單選按鈕而感到高興，所以我想出了一個更大的目標和一種關閉無線電組的方法，而不訴諸任何會破壞HTML/JavaScript純化論者的東西。
該技術依賴於不通過事件處理程序騷擾單選按鈕，而是檢查每個代理的只讀代理。一切都包含在下面的純JavaScript中，使用收音機組來選擇一種類型的奶酪，或根本沒有奶酪。
我特意在這個例子中沒有使用樣式來避免添加的圖層。轉儲按鈕會告訴你三種檢查狀態是什麼，所以用它來詢問點擊收音機或文本輸入元素後發生了什麼。舉個簡單的例子，我用全局來記住前一個狀態，但更優雅的方法是使用數據集，這是我在我的應用程序的真實代碼中使用的。
<!DOCTYPE html>
<html>
<head>
<title>Uncheck a radio button</title>
<script>
function attachEventListener(target, eventType, functionRef, capture) {
"use strict";
if (typeof target.addEventListener !== 'undefined') {
// Most modern browsers
target.addEventListener(eventType, functionRef, capture);
} else if (typeof target.attachEvent !== 'undefined') {
// IE
target.attachEvent('on' + eventType, functionRef);
} else {
eventType = 'on' + eventType;
if (typeof target[eventType] === 'function') {
var oldListener = target[eventType];
target[eventType] = function() {
oldListener();
return functionRef();
};
} else {
target[eventType] = functionRef;
}
}
}
</script>
</head>
<body>
<form>
<input id="Cheddar-radio" class="radio" type="radio" name="Cheeses-0" value="Cheddar Cheese" tabindex="-1"></input>
<input id="Cheddar-text" type="text" readonly value="Cheddar Cheese" tabindex="-1"></input><br>
<input id="Swiss-radio" class="radio" type="radio" name="Cheeses-0" value="Swiss Cheese" tabindex="-1"></input>
<input id="Swiss-text" type="text" readonly value="Swiss Cheese" tabindex="-1"></input><br>
<input id="American-radio" class="radio" type="radio" name="Cheeses-0" value="American Cheese" tabindex="-1"></input>
<input id="American-text" type="text" readonly value="American Cheese" tabindex="-1"></input><br><br>
<input onclick="dumpStates()" type="button" name="button" value="dump" tabindex="-1"></input>
</form>
<script>
window.onload = addRadioListeners;
function addRadioListeners() { // But do it on the -text elements.
attachEventListener(document.getElementById('Cheddar-text') , 'mousedown', rememberCurrentState, false);
attachEventListener(document.getElementById('Swiss-text') , 'mousedown', rememberCurrentState, false);
attachEventListener(document.getElementById('American-text'), 'mousedown', rememberCurrentState, false);
attachEventListener(document.getElementById('Cheddar-text') , 'mouseup', checkNewState, false);
attachEventListener(document.getElementById('Swiss-text') , 'mouseup', checkNewState, false);
attachEventListener(document.getElementById('American-text'), 'mouseup', checkNewState, false);
}
function dumpStates() {
console.log(document.getElementById('Cheddar-radio').checked +
' ' + document.getElementById('Swiss-radio').checked +
' ' + document.getElementById('American-radio').checked);
}
var elementWasChecked; // Global - Could just as well use a dataset attribute
// on either the -radio or -text element and check it instead.
function rememberCurrentState(event) {
var element;
var radioElement;
element = event.target;
radioElement = document.getElementById(element.id.replace(/text/,'radio'));
elementWasChecked = radioElement.checked;
radioElement.checked = true;
}
function checkNewState(event) {
var element;
var radioElement;
element = event.target;
radioElement = document.getElementById(element.id.replace(/text/,'radio'));
var currentState = radioElement.checked;
if (elementWasChecked === true && currentState === true) {
console.log('Changing ' + radioElement.id + ' to false.');
radioElement.checked = false;
}
};
</script>
</body>
</html>
如果您單擊單選按鈕，它們按預期工作。如果點擊每個旁邊的文本項目，它們就是單選按鈕的代理，只有一個例外。如果您點擊一個已經檢查過的關聯單選按鈕的文本項，它將取消選中它。因此，文本代理是事件觸發的，而不是單選按鈕。
額外的好處是，你現在可以擊中更大的文字目標。
$('input[type="radio"]').on("mousedown", function() {
if (this.checked) {
$(this).one("click", function() {
this.checked = false;
});
}
});
「以前的狀態」 指的是單選按鈕之前選中或取消選中？是不是現在的狀態呢？ – royrui 2011-06-06 12:17:06