我如何统一从多组单选按钮取得的文本？ [英] How can I unify text that take from multiple group radio button?

问题描述

我的javascript代码是这样的：

  $（function（）{
 $（'input [type = （）函数（）{
 var txt = $（this）.parent（）。text（）; 
 var $ radio = $（this）; 
 if（$ radio.data（'waschecked'）== true）
 {
 $ radio.prop（'checked'，false）; 
 $ radio.data（'waschecked'，false ）; 
 $（'＃result-select'）。text（''）; 
} 
 else {
 $ radio.data（'waschecked'，true）; 
 $（'＃result-select'）。text（txt）; 
} 
 $ radio.siblings（'input [type =radio]'）。data（'waschecked'，假）; 
}）; 
}）; 
  

演示和完整代码如下： https://jsfiddle.net/oscar11/m7by6zcw/21/

我想：

如果我选择chelsea，madrid和juve，结果如下：

lockquote

切尔西 - 马德里 - 尤文

如果我选择切尔西和马德里，结果如下：

切尔西 - 马德里

所以如果我选中单选按钮，它会显示文本。如果我取消选中单选按钮，它不会显示文本

我该怎么做？

更新：

可以取消选中单选按钮

例如：

如果我选择切尔西，马德里和尤文，结果如下：

切尔西 - 马德里 - 尤文

然后我取消选中madrid，结果如下：

切尔西 - 尤文

解决方案

更新小提琴： https://jsfiddle.net/m7by6zcw/37/

基本上就像Justinas的回答，但是可以检查/取消检查。

我真正改变的唯一部分是如何输出文本，如下所示：

  let output = []; 
 $（'input [type =radio]：checked'）。each（function（）{
 var txt = $（this）.parent（）。text（）; 
 output.push（txt）; 
}）; 
 $（'＃result-select'）。text（output.join（' - '））; 
  

您需要重置所有其他数据

  $（`input [name = $ {name}]：not（：checked）`）.data（'waschecked'，false）; 
  

My javascript code like this :

$(function(){
    $('input[type="radio"]').click(function(){
        var txt = $(this).parent().text();
        var $radio = $(this);
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#result-select').text('');
        }
        else{
            $radio.data('waschecked', true);
            $('#result-select').text(txt);
        }
        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});

Demo and full code like this : https://jsfiddle.net/oscar11/m7by6zcw/21/

I want to :

If I select chelsea, madrid and juve the result like this :

Chelsea - Madrid - Juve

If I select chelsea and madrid the result like this :

Chelsea - Madrid

So if I check radio button, it display the text. If I uncheck radio button, it not display the text

How can I do it?

Update :

The radio button can be unchecked

For example :

If I select chelsea, madrid and juve the result like this :

Chelsea - Madrid - Juve

Then I uncheck madrid, the result like this :

Chelsea - Juve

解决方案

Updated fiddle: https://jsfiddle.net/m7by6zcw/37/

Basically like Justinas's answer but with the checking/unchecking available.

The only part I really changed was how the text was being outputted, shown below:

    let output = [];
    $('input[type="radio"]:checked').each( function() {
            var txt = $(this).parent().text();
            output.push(txt);
    });
    $('#result-select').text(output.join(' - '));

You need to reset the data of everything else when something checks:

$(`input[name=${name}]:not(:checked)`).data('waschecked', false);

这篇关于我如何统一从多组单选按钮取得的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！