前端单选按钮/多选按钮JS工具方法总结

最近写了一个模块要反复使用到html中的单选按钮和多选按钮。在写完之后总结了几个常用的方法记录下来，以便之后直接使用。

<form id="objForm">


<input type="checkbox" name="week" value="1">星期一
<input type="checkbox" name="week" value="2">星期二
<input type="checkbox" name="week" value="3">星期三


<input type="radio" name="month" value="1">一月
<input type="radio" name="month" value="2">二月
<input type="radio" name="month" value="3">三月

form>

方法一：设置多选按钮或单选按钮默认勾选值

/**
 * 主要功能：设置多选按钮或单选按钮默认勾选值 
 *
 * @param opt = {formId: 'objForm', name: 'month', checkedStr: '1, 2, 3'};
 * @param formId 表单ID，为了精准定位多选框元素 
 * @param name 多选框的name属性
 * @param checkedStr 后台传递过来需要被勾选的value值，格式：'1, 2, 3'
 */
function setCheckedVal (opt) {
    // 根据name获取数组
    var arr = $('#' + opt.formId + ' input[name="' + opt.name + '"]');

    $.each(arr, function (index, item) {
        if (opt.checkedStr.indexOf(item.value) >= 0) {
            $(item).attr('checked', 'checked');
        }
    });
}

示例：现在需要将星期二设置为默认勾选

setCheckedVal({formId: 'objForm', name: 'week', checkedStr: '2'});

这里checkedStr : ‘2’为星期二对应的value值。

方法二：获取多选按钮或单选按钮中选中的值

/**
 * 主要功能：获取多选按钮或单选按钮中选中的值 
 *
 * @param opt = {formId: 'objForm', name: 'month'}; 
 * @param formId 表单ID
 * @param name 多选/单选按钮的name属性值
 * @return string 返回单选/单选按钮被选中值的val属性值，拼接字符串的形式,格式：'1,2'
 */
function getCheckedVal (opt) {
    var obj = $(opt.formId + ' input[name = "'+opt.name+'"]'); 
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    return check_val.join(',');
}

示例：现在页面中的星期二和星期三，已经被勾选了，需要获得星期多选按钮中被勾选想的value值传到后台

getCheckedVal({formId: 'objForm', name: 'week'});

方法三：将多选按钮或单选按钮选中的值全部清空

/**
 * 主要功能：将多选按钮或单选按钮选中的值全部清空
 *   
 * @param opt = {formId： '', name: ['day', 'week']};
 * @param formId 表单ID
 * @param name 表单中多选按钮或单选按钮的name属性，数组形式，支持同时操作多个单选按钮或多选按钮
 */
function removeCheckedVal(opt) {
    var names = opt.name,
    selector = '#' + opt.formId + ' ',
    arr = [];
    $.each(names, function (index, item) {
        arr.push('input[name="' + item + '"]');
    });
    selector = selector + arr.join(',');
    $(selector).removeAttr('checked');
}

示例：将表单中的单选按钮和多选按钮全部清空（如果里面有值被勾选的话）

removeCheckedVal(formId： 'objForm', name: ['month', 'week']);

方法四：将表单中的多选按钮和单选按钮进行切换

/**
 * 主要功能：将表单中的多选按钮和单选按钮进行切换
 * 
 * @param opt = {formId: '', name: ['day', 'week'], type};
 * @param formId 表单ID
 * @param name 表单中单选/多选框的name属性，数组形式，支持多个name同时切换
 * @param type 有两个值，checkbox多选和radio单选
 */
function loopCheckBoxAndRadio(opt) {
    var names = opt.name,
    selector = '#' + opt.formId + ' ',
    arr = [];
    $.each(names, function (index, item) {
        arr.push('input[name="' + item + '"]');
    });
    selector = selector + arr.join(',');
    $(selector).attr('type', opt.type);
}

示例：将星期多选按钮转换为单选按钮

loopCheckBoxAndRadio(formId: 'objForm', name: ['week'], 'radio');