jquery-radio记录

最新推荐文章于 2026-06-20 00:18:33 发布

原创最新推荐文章于 2026-06-20 00:18:33 发布 · 292 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #javascript #jquery

jquery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要记录了使用jQuery处理radio按钮的操作，包括如何动态追加含radio的行以及如何有效地获取radio的选中值，是作者程序人生的一部分记录。

用文字记录自己的程序人生有时候再项目中会应用到一些前端的知识，为了避免以后找不到这些知识，特此记录一下。前端代码：

<table cellpadding="0" cellspacing="0" width="100%" >
	<tr id="goodsTr">
    	<td width="10%">编号：</td>
       	<td width="10%">1</td>
        <td width="10%">名称：</td>
        <td width="10%">测试</td>
    </tr>
</table>

动态追加行技术

function addProperty(){
		//先清除下样式再加载
        $("tr[name=propertyInfo]").remove();
        var propertys=$("#goodsTr");
        var str=new StringBuilder();
        var records=data; //自己的数据
        //这块是我们的业务逻辑，需要双重的for取值，因为有多个radio
        if(records.length>0){
            for ( var idx in records) {
                str.append("<tr name=\"propertyInfo\">");
                str.append("<td width=\"10%\">"+records[idx].name+"：</td>")
                str.append("<td colspan=\"3\">");
                var specText = records[idx].value.split(/[,，+]/);//已中英逗号分隔出来
                for(var idxs in specText){
                    str.append("<input  type=\"radio\" οnclick=\"itemClick(this)\"  value='"+specText[idxs]+"' name='radio-"+records[idx].id+"'  />")
                    str.append(specText[idxs]);
                }
                str.append("</td></tr>");
            }
        }
        propertys.next().before(str.toStr());
    }

radio取值

function itemClick(obj){
		var records=data; //自己的数据
    	for ( var idx in records) {
    		var val =$('input:radio[name='radio-"+records[idx]+"']:checked').val();
    		//判断是否都选择上
    		if(typeof val == "undefined"){
    			return false;
    		}
    		alert(val)
    	}
    	alert("都选择上了")
}