如何在jQuery检索复选框值

小开

$("#t").text($("#cb").find(":checked").val())

小开

你的问题很模糊，但我认为这是你需要的:

$(function() {
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
$('#some_textarea').html($(this).val());
}
});
});

编辑:哦，好的。好了……之前没有HTML。无论如何，是的，我以为你的意思是把值放在一个文本区域，当它被点击。如果你想把选中的复选框的值放在页面加载的文本区域(可能有一个漂亮的逗号分隔)，这将是简单的:

$(function() {
$('#c_b input[type="checkbox"]:checked').each(function() {
$('#t').append(', '+$(this).val());
});
});

编辑2正如人们所做的那样，你也可以这样做来缩短我写的冗长选择器:

$('#c_b :checkbox:checked').each(function() {
$('#t').append(', '+$(this).val());
});

．.．我完全忘了那条捷径。；）

小开

不管怎样，你可能需要这样的东西:

 var val = $('#c_b :checkbox').is(':checked').val();
$('#t').val( val );

这将获得页面上第一个选中复选框的值，并将其插入到id='textarea'文本区域中。

注意，在示例代码中，应该将复选框放在表单中。

小开

如果你想在任何复选框被选中时立即插入它的值，那么这应该为你工作:

$(":checkbox").click(function(){
$("#id").text(this.value)
})

小开

最佳答案

这里有一个工作(参见示例):

 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中的这些更改。

小开

$(document).ready(function() {
$(':checkbox').click(function() {
var cObj = $(this);
var cVal = cObj.val();
var tObj = $('#t');
var tVal = tObj.val();
if (cObj.attr("checked")) {
tVal = tVal + "," + cVal;
$('#t').attr("value", tVal);
} else {
//TODO remove unchecked value.
}
});
});

小开

谢谢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函数只在它被选中时才返回值。对于所有其他元素，不管检查状态如何，都返回该值。

小开

 function updateTextArea() {
var allVals = $('#c_b :checked').map(function() {
return $(this).val();
}).get();
$('#t').val(allVals)
}
$(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});

小开

您也可以返回所有选定的复选框值，以逗号分隔的字符串。这也将使您更容易将其作为参数发送到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>

小开

这里有一个替代方案，以防你需要将值保存到一个变量:

var _t = $('#c_b :checkbox:checked').map(function() {
return $(this).val();
});
$('#t').append(_t.join(','));

(map()返回一个数组，我发现它比textarea中的文本更方便)。

小开

我有一个类似的问题，这是我如何解决它使用上面的例子:

 $(".ms-drop").click(function () {
$(function showSelectedValues() {
alert($(".ms-drop input[type=checkbox]:checked").map(
function () { return this.value; }).get().join(","));
});
});

小开

我用另一个帖子的答案来完成同样的事情，一个更简单和简短的方法是这样的:

var checkedCities = $('input[name=city]:checked').map(function() {
return this.value;
}).get();

最初，城市是从MySQL数据库中检索的，并在PHP while循环中循环:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

现在，使用上面的jQuery代码，我得到了所有的city_id值，并使用$.get(…)提交回数据库

这让我的生活变得如此简单，因为现在代码是完全动态的。为了添加更多的城市，我所需要做的就是在我的数据库中添加更多的城市，而不用担心PHP或jQuery。

小开

试试这个。

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
console.log($(this).val());
listCheck .push($(this).val());
});
console.log(listCheck);