function showRadioValue(name, value) { $('input[name=' + name + ']').each(function () { if(value == $(this).val()){ $(this).attr('checked', 'true'); } }); } function getRadioValue(name) { var value = 0; var i = 0; $('input[name=' + name + ']' ).each(function () { if ($('input[name=' + name + ']').eq(i).is( ':checked')) { value = $('input[name=' + name + ']').eq(i).val(); return; } i++; }); return value; } function showCheckBoxValue (name, value) { var values = value.split(',' ); var row = 1; $('input[name="' + name + '"]').each( function () { if (values[row] == 1) { $(this).attr("checked" , 'true'); } row++; }); } function getCheckboxValue (name) { var text = "" ; $('input[name="' + name + '"]').each( function () { var t = '' ; if ($(this ).is(':checked')) { t = "1"; } else { t = "0"; } text += "," + t; }); return text; }
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/jquery-2.2.3.js"></script> </head> <body> <div> <div> <label><input type="radio" value="1">1</label> <label><input type="radio" value="2">2</label> <label><input type="radio" value="3">3</label> </div> <div> <label><input type="radio" value="1">1</label> <label><input type="radio" value="2">2</label> <label><input type="radio" value="3">3</label> </div> <div> <label><input type="radio" value="1">1</label> <label><input type="radio" value="2">2</label> <label><input type="radio" value="3">3</label> </div> <div> <label><input type="checkbox">1</label> <label><input type="checkbox">2</label> <label><input type="checkbox">3</label> <label><input type="checkbox">3</label> </div> <div> <label><input type="checkbox">1</label> <label><input type="checkbox">2</label> <label><input type="checkbox">3</label> <label><input type="checkbox">3</label> </div> <button>显示结果</button> <label>result</label> </div> <script> //多条radio或者checkbox的快速赋值 var data = '{"param01":"1","param02":"3","param03":"2","param04":",1,0,0,0","param05":",0,0,1,1"}'; var json =eval( '(' + data + ')'); for(var key in json){ if ($('input[name=' + key + ']').attr('type') == 'radio') { showRadioValue(key, json[key]); } if ($('input[name=' + key + ']').attr('type') == 'checkbox') { showCheckBoxValue(key, json[key]); } } function showRadioValue(name, value) { $('input[name=' + name + ']').each(function () { if(value == $(this).val()){ $(this).attr('checked', 'true'); } }); } function getRadioValue(name) { var value = 0; var i = 0; $('input[name=' + name + ']' ).each(function () { if ($('input[name=' + name + ']').eq(i).is( ':checked')) { value = $('input[name=' + name + ']').eq(i).val(); return; } i++; }); return value; } function showCheckBoxValue (name, value) { var values = value.split(',' ); var row = 1; $('input[name="' + name + '"]').each( function () { if (values[row] == 1) { $(this).attr("checked" , 'true'); } row++; }); } function getCheckboxValue (name) { var text = "" ; $('input[name="' + name + '"]').each( function () { var t = '' ; if ($(this ).is(':checked')) { t = "1"; } else { t = "0"; } text += "," + t; }); return text; } function showResult() { var model = {}; var radioName = ''; var checkboxName = ''; $("input[type='radio']").each(function () { if($(this).attr('name') != radioName){ radioName = $(this).attr('name'); model[radioName] = getRadioValue(radioName); } }); $("input[type='checkbox']").each(function () { if($(this).attr('name') != checkboxName){ checkboxName = $(this).attr('name'); model[checkboxName] = getCheckboxValue(checkboxName); } }); console.log(model); } </script> </body> </html>
Tips
•如果有一些特殊处理的内容（如时间格式文本），可以先遍历后在遍历之后单独进行赋值。
•以上方法可以用于所有以ID定义的用于显示和获取数据的HTML元素。
•用好jQuery的选择器可以获取到任何所需的元素、元素集合。
•在each()方法中$(this)表示当前元素。
•获取所选ID的元素标签：$('#' + key).prop('tagName') == 'SPAN'，注意：标签结果'SPAN'都是大写的,可以打log验证。
•不断找规律、总结提炼，找出最好的偷懒方法，尽量避免体力劳动。