radio單選點擊可取消已選擇選項

本文轉載自查看原文 2018-07-04 18:34 4709 前端

radio單選選中后，再次點擊可取消選中，實現選項必須單選或者不選擇。

效果如下：

您喜歡哪款瀏覽器？

Internet Explorer
Firefox
Netscape
Opera

具體代碼如下：

<!DOCTYPE HTML>
<html>
<head>
<title>單選按鈕可取消取消</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('input:radio').click(function(){
//alert(this.checked);

var domName = $(this).attr('name');

var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true){
$radio.prop('checked', false);
$("input:radio[name='" + domName + "']").data('waschecked',false);
//$radio.data('waschecked', false);
} else {
$radio.prop('checked', true);
$("input:radio[name='" + domName + "']").data('waschecked',false);
$radio.data('waschecked', true);
}
});
});
</script>
</head>
<body>
<p>您喜歡哪款瀏覽器？</p>

<form>

<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" value="Firefox">Firefox<br />
<input type="radio" name="browser" value="Netscape">Netscape<br />
<input type="radio" name="browser" value="Opera">Opera<br />
</form>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Winform 可取消的單選按鈕（RadioButton） vue效果之改element的el-checkbox-group多選框組為單選可取消的單選框(樣式還是多選框的樣式) 點擊DIV觸發其他元素的點擊事件(案例：點擊type="radio" 的input 標簽外層DIV，觸發內部單選點擊選中事件) jsp實現復選框默認選中，不可取消自定義按鍵響應QComboBox選擇選項的方法 windows使用git bash 無法交互鍵盤上下鍵移動選擇選項的解決方法基於DevExpress開發的GridView如何實現某一列的一行讓用戶可以從下列列表選擇選項 js：獲取單選組radio中的被選擇的數據 jquery解決input[type=radio]點擊選中取消 layui checkbox 復選框單選取消選擇