我正在尝试编写一个从 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()
。
我怎样才能达到这个结果?
干杯!
最佳答案
最简单的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>
关于javascript - 如果选中复选框,则函数更新字符串或值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40963221/