lan*_*nqy 239 html checkbox jquery
如何使用jQuery获取选中的复选框值,并立即将其放入textarea？
就像这段代码一样:
<html>
<head>
</head>
<body>
<div id="c_b">
<input type="checkbox" value="one_name" checked>
<input type="checkbox" value="one_name1">
<input type="checkbox" value="one_name2">
</div>
<textarea id="t"></textarea>
</body>
</html>
如果id="c_d"由Ajax更新,则下面的altCognito代码不起作用.有什么好的解决方案吗？
cgp*_*cgp 317
这是一个有效的(参见示例):
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
几个月后,如果ID发生变化,就如何保持上述工作提出了另一个问题.好吧,解决方案归结为将updateTextArea函数映射到使用CSS类的通用函数,并使用live函数监视DOM以获取这些更改.
小智 120
您还可以以逗号分隔的字符串返回所有选中的复选框值.当您将其作为参数发送到SQL时,这也将使您更容易
下面是一个示例,它返回所有选中的复选框值,这些值在逗号分隔的字符串中具有名称"chkboxName"
这是javascript
function showSelectedValues()
{
alert($("input[name=chkboxName]:checked").map(
function () {return this.value;}).get().join(","));
}
这是HTML示例
<html>
<head>
</head>
<body>
<div>
<input name="chkboxName" type="checkbox" value="one_name" checked>
<input name="chkboxName" type="checkbox" value="one_name1">
<input name="chkboxName" type="checkbox" value="one_name2">
</div>
</body>
</html>
Kyl*_*ris 65
你的问题很模糊,但我认为这就是你所需要的:
$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
$('#some_textarea').html($(this).val());
}
});
});
编辑:哦,好吧..你去...你以前没有HTML.无论如何,是的,我认为你的意思是在点击时将值放在textarea中.如果你想在页面加载时将选中的复选框的值放入textarea(可能有一个很好的逗号分隔),它将如下所示:
$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});
编辑2正如人们所做的那样,你也可以这样做来快捷我写的冗长的选择器:
$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});
......我完全忘记了那条捷径.;)
小智 49
这对我很有用:
alert($("input[name=chkboxName]:checked").map(function() {
return this.value;
}).get().join(","));
谢谢Mohamed ElSheikh
小智 8
谢谢altCognito,您的解决方案有所帮助.我们也可以使用复选框的名称来完成此操作:
function updateTextArea() {
var allVals = [];
$('[name=chkbox]:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
以下内容可能很有用,因为我到这里寻找的是一个稍微不同的解决方案.我的脚本需要自动循环输入元素并且必须返回它们的值(对于jQuery.post()函数),问题是复选框返回它们的值而不管检查状态如何.这是我的解决方案:
jQuery.fn.input_val = function(){
if(jQuery(this).is("input[type=checkbox]")) {
if(jQuery(this).is(":checked")) {
return jQuery(this).val();
} else {
return false;
}
} else {
return jQuery(this).val();
}
};
用法:
jQuery(".element").input_val();
如果给定的输入字段是复选框,则input_val函数仅在检查时返回值.对于所有其他元素,无论选中状态如何,都会返回该值.
如果您需要将值保存到变量,可以使用以下选项:
var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));
(map()返回一个数组,我发现它比textarea中的文本更方便).