复制无线电组的值

时间:2014-11-18 11:52:51

标签: javascript jquery

我想在其他div之前复制活动无线电接口的文本值。无线电被分成几组。在每个组中始终处于活动状态,只有一个。因此,每个组的新值也应始终为1。我将添加一个文本值,但我无法删除该组的先前值。

    $('.views-exposed-widget').find('.form-type-radio').on('click', function(){
        var a = $(this).closest('.form-type-radio').find('label[class="option"]').text();
        $('.views-widget-sort-by').before('<span>'+a+'</span>');
    });

我的例子:http://jsfiddle.net/e59ogp8a/

3 个答案:

答案 0 :(得分:2)

你可以为它们命名(,从而在无线电组和跨度之间创建一个映射),这样你就可以轻松找到它们

$('.views-exposed-widget').on('change', 'input', function () {
    var self = $(this),
        name = this.name,
        text = self.closest('.form-type-radio').find('label[class="option"]').text(),
        target = $('.views-widget-sort-by').find('[data-for="'+ name +'"]'); // find the related span

    // check if we found a related span, and if not create it
    if (target.length == 0){ 
        target = $('<span data-for="'+name+'"></span>').appendTo('.views-widget-sort-by');
    }
    // set the text of the span
    target.text( text );
});

http://jsfiddle.net/gaby/5nutt42g/1/

演示

第一台收音机上的ID也是错误的(它应该是edit-tid-1-4而不是edit-tid-1-2

答案 1 :(得分:0)

你必须删除div元素的所有主要兄弟姐妹。

$('.views-exposed-widget').find('.form-type-radio').on('click', function(){
        var a = $(this).closest('.form-type-radio').find('label[class="option"]').text();
        $('.views-widget-sort-by').prevAll().remove();
        $('.views-widget-sort-by').before('<span>'+a+'</span>');
});

答案 2 :(得分:0)

您可以使用组名作为span的类名,以便在单击组按钮后清除组的值。

看看这里:http://jsfiddle.net/e59ogp8a/3/

$('.views-exposed-widget').find('.form-type-radio').on('click', function(){
    var a = $(this).closest('.form-type-radio').find('label[class="option"]').text();
    var groupName= $(this).find('.dls-radio').attr("name");
    console.log($('.views-widget-sort-by').prev('.'+groupName).text(''));            
    $('.views-widget-sort-by').before('<span class="'+groupName+'">'+a+'</span>');
});