jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用jQuery基于复选框ID填充文本字段?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_1@
上下文

我正在尝试为这个WordPress question建立一个答案.

我正在媒体上传厚箱窗口中生成动态复选框.它们应该用于填充文本字段,用户可以在其中复制/粘贴其值.

文本字段的最终输出是此短代码中的include属性.

主要是,我需要帮助来构建最后一部分:checkBox – >填充/取消填充文本字段…

布局

>动态复选框
>文本字段的插入点(在控制台中显示的最后一个< tr>之后)
>要填充的文本字段,应为include =“checkBoxID1逗号checkBoxID2逗号等”

实际代码

<?PHP
add_action( 'admin_head-media-upload-popup','wpse_53803_script_enqueuer' );

function wpse_53803_script_enqueuer() {
    if( $_GET['tab'] == 'gallery' ) 
    {
        ?>
            <style>#media-upload th.order-head {width: 5%} #media-upload th.actions-head {width: 10%}</style>
            <script type="text/javascript">
            jQuery(document).ready( function($) {

                /* Iterate through the media items */
                $('.filename.new').each(function(i,E){
                    var id = $(this).next('.slidetoggle').find('thead').attr('id').replace(/media-head-/,'');
                    var filename = $('<label>Add to gallery list <input type="checkBox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>').insertBefore($(this));
                    filename.css('float','right').css('margin-right','40px');

                    filename.id = id; // PROBLEM: not sure how to do this in Javascript

                    // BUG: the alert is being fired twice
                    filename.click(function() {
                        alert('Handler for img id = '+filename.id+' called.');
                    });
                });                 
            });
            </script><?PHP
    }
}

缺少的部分

>创建要填充的动态文本字段.
>解决问题和评论中注意到的错误.
>使filename.click(function()在文本字段内构建所需的字符串.

解决方法

你可以使用类似的东西来做到这一点

$(document).on('change','input[type="checkBox"][name^="gal-item"]',function(){
    var checkedIds = $('input[type="checkBox"][name^="gal-item"]:checked')
                       .map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));
    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

});

您可以通过检查@L_801_25@媒体标记,将文档替换为您必须找到的更近的静态容器.
并且您已找到要@L_801_25@输入字段的元素,将其@L_801_25@为

$('<span></span>')
 .appendTo(TARGETIDORCLASS);

Working DEMO

基于此,您的重写代码将是类似的

jQuery(document).ready( function($) {
     //add input field
     $('<span></span>')
 .appendTo(TARGETIDORCLASS);
    //bind checkBox change handler


     $(document).on('change',function(){
         var checkedIds = $('input[type="checkBox"][name^="gal-item"]:checked').map(function(){
       return parseInt($(this).prop('name').replace(/gal-item-/,''));

    }).get();

    $('#shortcode').val('include="'+checkedIds.join(',')+'"');

    });


    /* Iterate through the media items */
    $('.filename.new').each(function(i,E){
        var id = $(this).next('.slidetoggle')
                        .find('thead')
                        .attr('id')
                        .replace(/media-head-/,'');
       var filename = $('<label>Add to gallery list <input type="checkBox" name="gal-item-'+id+'" id="gal-item-'+id+'" value=""  /></label>')
              .insertBefore($(this));
       filename.css('float','40px');

                });                 
            });

这应该工作.我很匆忙,不能测试太多,如果你发现任何错误,请检查并告诉我,我很乐意解决这些问题.

大佬总结

以上是大佬教程为你收集整理的使用jQuery基于复选框ID填充文本字段?全部内容,希望文章能够帮你解决使用jQuery基于复选框ID填充文本字段?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。