JavaScript中获取radio的值

一、JavaScript中获取radio的值

1、radio为单选按钮，一般单选按钮有多个可供选择的项，而只能选择一个，比如男、女

2、那么给radio标签里面设定一个id或者class属性

3、在js里面，可以通过checked这个属性来判断哪一个radio标签被选择，

4、这样就可以获取到radio标签的值，然后根据标签的值进行判断，保存/插入数据库等操作

二、如何利用js获取form表单数据

在处理网页表单数据时，面对大量数据时，手动逐一获取显得既繁琐又容易出错。为解决此问题，我们可使用JavaScript封装一个函数，自动收集并整理表单信息，提高效率。此函数的核心在于识别表单元素，并根据其类型获取对应数据。表单元素需有name属性，此属性将作为数据在后端处理时的标识。

接下来，以HTML示例展示页面布局，包括下拉框、输入框、密码框、单选框与复选框等。

为实现自动化收集，引入jQuery库，简化操作。以下是JavaScript代码实现：

//封装方法，获取到form表单的数据。使用此方法，表单元素必须存在那么属性。

$(el).each(function(index, item){

if(item.type=="text"|| item.type=="password"|| item.type=="select-one"|| item.type=="tel"|| item.type=="search"|| item.type=="range"|| item.type=="number"|| item.type=="month"|| item.type=="email"|| item.type=="datetime-local"|| item.type=="datetime"|| item.type=="date"|| item.type=="color"){

//获取到name的值,name的值就是向后台传递的数据

obj[$(this).attr("name")]=$(this).val();

} else if(item.type=="checkbox"){

if($(this).attr("name")&&!stamp){

var checkboxEl=$("input[name="+$(item).attr('name')+"]:checked");

checkboxEl.each(function(idx, itm){

checkboxArr.push($(itm).val());

obj[$(this).attr("name")]= checkboxArr.join(",");

} else if(item.type=="radio"){

var radio_val=$("input[name="+$(item).attr('name')+"]:checked").val();

obj[$(item).attr("name")]= radio_val;

var parameter= getParameter(".query");

以上示例展示了一个自动收集表单数据的JavaScript函数，通过调用此函数并结合jQuery库，可以简化收集大量表单数据的过程，提升开发效率。

三、js动态添加的radio,点击label无效

1、动态添加的radio必须有name属性，同一组的radio其name属性一定相同（所谓同一组就是说多个radio中只有一个被选中，其他自动恢复为未选中状态）；

2、如果要关联label，则radio必须设置id属性，且id必须具有唯一性（不但radio之间的id不能相同，整个页面所有元素的id都不能相同）；

3、label的for属性必须与所关联的radio相同。

<buttonid=btn>添加radio</button>

<divid=test></div>

document.getElementById("btn").onclick=function(){

vaript=document.createElement("input");

document.getElementById("test").appendChild(ipt);

varlbl=document.createElement("label");

lbl.setAttribute("for","r"+id);

document.getElementById("test").appendChild(lbl);

</script>

如果把radio放到label内，也可以不设置radio的id属性和label的for属性：

如果把radio放到label内，也可以不设置radio的id属性和label的for属性：

<buttonid=btn>添加radio</button>

<divid=test></div>

document.getElementById("btn").onclick=function(){

varlbl=document.createElement("label");

lbl.innerHTML="r"+parseInt(Math.random()*1000);

vaript=document.createElement("input");

document.getElementById("test").appendChild(lbl);