js 单选框点击选中和取消

最新推荐文章于 2024-11-15 18:05:45 发布

原创最新推荐文章于 2024-11-15 18:05:45 发布 · 5.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox HTML JS

本文详细介绍了如何使用JavaScript操作HTML中的单选框（checkbox），包括实现单选框的选中和取消选中功能。通过示例代码，读者可以了解到JS与DOM交互的基本技巧，为网页动态交互提供基础。

首先是html代码，一个单选框 一个 隐藏域，便于给后台传递数据.
<input type="checkbox" calss="span4"  name="randomPassword" id="randomPassword"  value="" onclick="changeBox(this)"/>
<input type="hidden" name="isRandomPassword" id="isRandomPassword" value=""/>
接下来是 js代码.
        /**
	*单选框点击事件
	*/
	function changeBox(obj) {
		var box= $(obj);
		if(obj.checked == true) {
			box.parent().parent().next().val("Y");
			box.parent("span").addClass("checked");
		} else {
			box.parent("span").removeClass("checked");
			box.parent().parent().next().val("N");		
                }
	}

$(function(){
		var randomPasswordBox= $("#randomPassword");
		var randomPasswordBoxClients = randomPasswordBox.val();
		if(randomPasswordBoxClients == 'Y') {
			randomPasswordBox.parent("span").addClass("checked");
			randomPasswordBox.attr("checked",true);
		}else {
			$("#randomPassword").val("N");
			$("#isRandomPassword").val("N");
		}
	})