具有数组名称的 html 元素的正确 jQuery 选择器答案

【问题标题】：Proper jQuery selector for html elements with array name具有数组名称的 html 元素的正确 jQuery 选择器
【发布时间】：2017-10-05 18:36:21
【问题描述】：

我的代码中有多个复选框

<label>
 <input name="meta[Radio & Speakers]" class="flat" type="checkbox" value="YES"> Radio & Speakers
</label>

只要未选中复选框，就会在未选中的同名复选框之前放置一个隐藏输入：

$('input').on('ifUnchecked', function(event){
    name = $(this).attr('name');

    if($('input[type="checkbox"][name="'+name+']"').length == 0){
        $(this).before('<input type="hidden" name="'+name+'" value="NO"/>');
    }

});

我想通过使用$('input[type="checkbox"][name="'+name+']"').length 检查隐藏输入是否存在来避免多次插入，但它似乎失败了，我在这里遗漏了一些东西......

手动添加隐藏的复选框对于我的场景是不可行的，因为它们太多了。

【问题讨论】：

什么是ifUnchecked 事件？
$("name='meta\[Radio \& Speakers\]'")
@dfsq github.com/fronteed/icheck 插件
我认为他正在使用iCheck插件
@dfsq：我正在使用 iCheck 插件

标签： jquery html checkbox

【解决方案1】：

你必须这样做：-

1.使用click事件。（如果使用插件，则使用您的初始事件ifUnchecked）

2.检查复选框是否选中。

3.如果未选中复选框，则检查已隐藏的输入是否不存在。如果没有，则仅添加隐藏输入。

检查下面的sn-p。

$(document).ready(function(){
  $('input').on('click', function(event){ //or use $('input').on('ifUnchecked', function(event){
    name = $(this).attr('name');
    if(!$(this).is(":checked")){
     if($(this).parent('label').find('input[type="hidden"]').length ==0){
        $(this).before('<input type="hidden" name="'+name+'" value="NO"/>');
     }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input name="meta[Radio & Speakers]" class="flat" type="checkbox" value="YES"> Radio & Speakers</label>

【讨论】：

完美！解决了if($(this).parent('div').find('input[type="hidden"]').length ==0){ $(this).before('<input type="hidden" name="'+name+'" value="NO"/>'); }