javascript - 如果选中复选框，则函数更新字符串或值

Question

我正在尝试编写一个从 input:radio 或 text() 返回值的函数 > 来自 span，当选中 checkbox 时。

没有必要两者都返回。无论是其中之一都会有所帮助。

这是 html 模板示例:

$('input.choose-age').on('change', function() {
  $('input.choose-age').not(this).prop('checked', false);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <div class='col-xs-3 col-md-2'>
    <input type="radio" id='wom-10-14 age' class='choose-age' value='10-14' checked /> <span class='text-left'>10-14</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" id='wom-15-19 age' class='choose-age' value='15-19' /> <span class='text-left'>15-19</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" id='wom-10-19 age' class='choose-age' value='10-19' /> <span class='text-left'>10-19</span>
  </div>
</div>

这是我迄今为止尝试过的:

尝试 1

function ageLabel() {
    var label = $('input:radio').change(function() {
        var result = $('input:radio:checked').map(function() {
            var age = $(this).next('span').text();
            return age;
        }).get();
        return result[0];
    });
    return label;
};

尝试 2

function ageLabel() {
    $('#age').click(function() {
        if ($(this).is(':checked')) {
            var result = $(this).next('span').text();
        };
        return result;
    });
};

尝试3

function ageLabel() {
    $('input:radio').click(function() {
        if ($(this).is(':checked')) {
            var results = $('input:radio:checked').map(function() {
                var aged = $(this).next('span').text();
                return aged;
            }).get();
            return results[0];
        };
    });
};

尝试4

function ageLabel() {
    d3.selectAll('#age').on('change', function() {
        val = this.value;
        return val;
    });
};

当检查不同的input时，上面的每个代码都不会返回新的value或text()。

我怎样才能达到这个结果？

干杯!

Answer 1

最简单的d3方式是:

d3.selectAll(".choose-age")
  .on("change", function(){
    console.log(this.value);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="checkbox">
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-10-14 age' class='choose-age' value='10-14' checked /> <span class='text-left'>10-14</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-15-19 age' class='choose-age' value='15-19' /> <span class='text-left'>15-19</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-10-19 age' class='choose-age' value='10-19' /> <span class='text-left'>10-19</span>
  </div>
</div>

编辑

完全错过了这个问题的要点，即您想要在函数中返回值。 @jonasw 的答案有效，但过于复杂。结合更简单的方法。首先，您可以在外部作用域中使用变量。

var ageLabel = '10-14';
d3.selectAll(".choose-age")
  .on("change", function(d){
    ageLabel = this.value;
  });

ageLabel 将始终具有该值。

或者第二，如果您想要一个函数，只需选择值即可:

function ageLabel(){
  return d3.select(".choose-age:checked").node().value;
}

setInterval(function(){
  console.log(ageLabel());
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="checkbox">
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-10-14 age' class='choose-age' value='10-14' checked /> <span class='text-left'>10-14</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-15-19 age' class='choose-age' value='15-19' /> <span class='text-left'>15-19</span>
  </div>
  <div class='col-xs-3 col-md-2'>
    <input type="radio" name="choose-age" id='wom-10-19 age' class='choose-age' value='10-19' /> <span class='text-left'>10-19</span>
  </div>
</div>