如何在jQuery中检索复选框值

240

如何使用jQuery获取选中的复选框值，并立即将其放入文本区域？

就像下面的代码：

<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>

如果Ajaxid="c_d"更新了，则altCognito的以下代码无效。有什么好的解决方法吗？

jquery  html  checkbox 
— 兰奇
source
您一次要全部还是一次？
— TStamper
我们如何“选中”具有给定值/标签的框？说“ one_name2”？
— 2010年
5
@Amitd使用$（“ input [name = one_name2]”）。attr（'checked'，true）;
— Mark Schultheiss 2010年
谢谢，很好用..即使是无线电类型。1票赞成：)
— 10年

Answers:

320

这是一个可行的方法（请参阅示例）：

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

— cgp
source
2
啊哈！优秀的。您已经考虑了两种可能的情况。先生，辛苦了 ;）
— KyleFarris
我们如何“选中”具有给定值/标签的框？说“ one_name2”？
— 2010年
6
我喜欢使用map这样的东西：$（'：checked'，'#c_b'）。map（function（i，cb）{return cb.value}）.get（）。另外，这只是个人喜好，但是我将获取值与更改文本区域分开，例如：$（function（）{$（'＃c_b input'）。click（$（'＃t'）。val （$（'：checked'，'#c_b'）。map（function（i，cb）{return cb.value}）.get（）））; $（'＃c_b input：first'）。triggerHandler（'点击'）;}）;
— 布兰登
使用$(document).on("click", "#c_b input", updateTextArea);代替来解决ajax'y问题。
— Goldentoa11年
1
不知道这是否仅在IE（11）中，但是不应该$('#c_b:checked')（强调间距）吗？
— AceMark 2014年
124

您还可以用逗号分隔的字符串返回所有选中的复选框值。当您将其作为参数发送到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>
— 穆罕默德·艾尔·谢赫（Mohamed ElSheikh）
source
在寻找一种方法来获取给定名称的所有选中复选框的所有值时，我偶然发现了这一点，它对我来说有两个小问题。1）每次我选中第一个复选框以外的其他复选框时，它都会在第一个复选框中切换选中标记。2）当我尝试将此设置为数组以便以后可以访问信息时，它崩溃。
— 牧师泡泡
3
老实说，这是最好的答案。很简单。我会删除“函数”和“警报”，因为这会使一些人感到困惑，但是代码很简单，做得很好。
— tmarois
showSelectedValues也可用于解码具有相同名称的单选按钮组
— Matthew Lock
65

您的问题很模糊，但是我认为这是您需要的：

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

编辑：哦，好的..你去了...您之前没有HTML。不管怎样，是的，我认为您打算在单击该值时将其放在文本区域中。如果您希望在页面加载时将选中的复选框的值放到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());
});

...我完全忘了那个捷径。;）

— 凯尔·法里斯
source
50

这对我来说非常合适：

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

感谢Mohamed ElSheikh

— 尼克
source
1
很棒的人...这是唯一为我的ajax循环工作的人；）谢谢
— Sagive SEO 2012年
7
也可以$（'input [name = selection]：checked'）。map（function（）{return this.value;}）。toArray（）
— ygaradon
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();
});
— 哈普雷特·巴蒂亚
source
6

由于我在这里寻找稍微不同的解决方案，因此以下内容可能有用。我的脚本需要自动循环遍历输入元素，并且必须返回它们的值（对于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函数仅在选中后返回一个值。对于所有其他元素，无论检查状态如何，都将返回该值。

— 安迪
source
它确实可以正常工作，非常感谢……我刚刚更改了“ return jQuery（this）.val（）;” “返回真实”；因为在我的情况下这是一个复选框，所以我只需要知道是否已选中即可。。谢谢！
— TCB13
5

如果您需要将值保存到变量中，这是一种替代方法：

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

（map（）返回一个数组，我发现它比textarea中的文本更方便使用）。

— 光盘
source
3 
   $(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.
           }
        });
    });
1
您已经过于复杂了。另外，通常不使用value参数设置textarea的值-文本框的值是它的innerHTML。而且，如果要设置某个元素的值，通常最好将'val（）'方法用于浏览器抽象。
— KyleFarris
3 
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
— ator
source
2

无论如何，您可能需要这样的东西：

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

这将获取页面上第一个选中的复选框的值，并将其插入到textarea中，并带有 id='textarea'。

请注意，在示例代码中，应将复选框置于表单中。

— 皮姆·贾格（Pim Jager）
source
2
这是错误的，is返回一个布尔值，一个布尔值没有val方法。
— undefined 2013年
2

使用另一篇文章的答案，我使用的一种更简单快捷的方法来完成此任务，如下所示：

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的末尾。

— e山
source
0

我有一个类似的问题，这就是我使用上面的示例解决的方法：

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

试试这个

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

如果您要在检查时立即插入任何复选框的值，则此方法对您有用：

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
— 小鸭
source
不考虑多个值并取消选中复选框
— Rob于2009年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.