名称属性为数组类型时如何检查无线电输入状态？答案

【问题标题】：How to check radio input status when name attribute is array type?名称属性为数组类型时如何检查无线电输入状态？
【发布时间】：2018-02-27 15:21:04
【问题描述】：

HTML：

<div class="raio-group require">
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="9">ইসলাম ও জীবন
    <br>
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="7">কবিতা
    <br>
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="1">গল্প
    <br>
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="11">ট্রিপস &amp; ট্রিকস
    <br>
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="8">প্রযুক্তি
    <br>
    <input class="fp_radio" type="radio" name="fp_tax_category[]" value="10">সাম্প্রতিক বিষয়
    <br>
</div>

jquer：

jQuery(document).ready(function($){

    $('.require').bind("propertychange change click keyup input paste", function(event){
        THIS = $(this);
        validate();

        if(no_error_remaining())
            $('.common-success-msg').show();

    });

});
function validate(){

    if(is_empty())
        set_warning();
    else
        unset_warning();
}
function is_empty(){

    if(THIS.hasClass('raio-group'))
        return radio_is_unchecked();    
    else if(THIS.hasClass('input-group'))
        return is_input_group_not_set();
    else if(THIS.hasClass('wp-editor-area')){
        return editor_content_is_empty('frontier_post_content');
    }
    else
        return is_value_not_set();
}

function radio_is_unchecked(){

    var name = THIS.find("input").attr("name");

    if($("input:radio[name="+name+"]:checked").length == 0)
        return true;

    return false;
}

此代码工作正常，而无线电类型输入名称属性为：fp_tax_ctegory。我处于使用 fp_tax_ctegory 作为名称的情况。现在我收到以下错误：Syntax error, unrecognized expression: input:radio[name=fp_tax_category[]]:checked 这个错误本身就说明了一切。我有我的错。但是如何解决这个问题，保留 fp_tax_category[] 而不是 fp_tax_category？

【问题讨论】：

如您所知，[ 和 ] 是选择器操作的保留字符。您需要通过使用 $("input:radio[name='"+name+"']:checked") 作为选择器来明确表示它是一个字符串，请注意附加的撇号。 Possible duplicate

标签： jquery

【解决方案1】：

由于THIS包含class="raio-group require">元素，你可以重写radio_is_unchecked函数：

function radio_is_unchecked(){
    return THIS.find('input:checked').length >= 0;
}

如果您想保持函数原样，则必须将 [] 字符与 \ 分隔以修复 css 选择器。

【讨论】：

如果我有多个组，那么它可以完美运行吗？意思是 THIS.find('input:checked') 处理最近的无线电输入？

【解决方案2】：

如果您使用的是新版本的 JQuery（版本 >= 3.0），可以使用$.escapeSelector( "fp_tax_category[]" );

这里是要更改的代码：

function radio_is_unchecked(){

    var name = THIS.find("input").attr("name");
    // Here is the change 
    if($("input:radio[name="+$.escapeSelector( name )+"]:checked").length == 0)
        return true;

    return false;
}

【讨论】：

【解决方案3】：

您可以为单选按钮的不同组（例如 group1）命名不同的类。

<div class="raio-group require">
    <input class="fp_radio group1" type="radio" name="fp_tax_category[]" value="9">

然后你可以像这样修改函数

function radio_is_unchecked(){
    return THIS.find('.group1:checked').length >= 0;
}

【讨论】：