如何在jQuery中检索复选框值答案

【问题标题】：How to retrieve checkboxes values in jQuery如何在jQuery中检索复选框值
【发布时间】：2010-10-21 15:08:52
【问题描述】：

如何使用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>

如果id="c_d" 被Ajax 更新，则下面的altCognito 代码不起作用。有什么好的解决办法吗？

【问题讨论】：

你想要全部还是一次？
我们如何“检查”带有给定值/标签的框？说“one_name2”？
@Amitd 使用 $("input[name=one_name2]").attr('checked', true);
感谢运行良好..即使是收音机类型。 1 票赞成 :)

标签： jquery html checkbox

【解决方案1】：

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

【讨论】：

可以同时选中多个复选框。

【解决方案2】：

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

$(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());
});

...我完全忘记了那个快捷方式。 ;)

【讨论】：

【解决方案3】：

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

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

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

请注意，在您的示例代码中，您应该将复选框放在一个表单中。

【讨论】：

这是错误的，is返回一个布尔值，一个布尔值没有val方法。

【解决方案4】：

如果您想在检查时立即插入任何复选框的值，那么这应该适合您：

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

【讨论】：

不考虑多个值和取消选中复选框

【解决方案5】：

这是一个有效的方法 (see the example)：

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

【讨论】：

啊哈！优秀。您已经考虑了这两种可能的情况。干得好先生。 ;)
我们如何“检查”带有给定值/标签的框？说“one_name2”？
我喜欢用 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 问题。
不确定这是否只是在 IE(11) 中，但不应该是 $('#c_b:checked')（强调间距）吗？

【解决方案6】：

$(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.
    }
  });
});

【讨论】：

你把它复杂化了。此外，您通常不会使用 value 参数设置 textarea 的值——文本框的值是它的 innerHTML。如果要设置某个元素的值，通常最好使用 'val()' 方法进行浏览器抽象。

【解决方案7】：

感谢 altCognito，您的解决方案有所帮助。我们也可以通过使用复选框的名称来做到这一点：

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

【讨论】：

【解决方案8】：

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

【讨论】：

它真的很好用，非常感谢...我刚刚更改了“返回 jQuery(this).val();” “返回真”；因为在我的情况下它是一个复选框我只需要知道它是否被选中..谢谢！

【解决方案9】：

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

【讨论】：

【解决方案10】：

您还可以以逗号分隔的字符串返回所有选中的复选框值。当您将其作为参数发送到 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>

【讨论】：

我只是在寻找一种方法来获取给定名称的选中复选框的所有值时偶然发现了这一点，它对我有两个小问题。 1）每次我选中第一个以外的框时，它都会切换第一个中的复选标记。 2) 当我尝试将其设置为一个数组以便以后可以访问信息时，它崩溃了。
这确实是最好的答案。很简单。我会删除“功能”和“警报”，因为这会让一些人感到困惑，但代码很简单，做得很好。
showSelectedValues 也适用于解码具有相同名称的单选按钮组

【解决方案11】：

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

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

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

【讨论】：

【解决方案12】：

我遇到了类似的问题，这就是我使用上面的示例解决它的方法：

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

【讨论】：

【解决方案13】：

我用来完成同样任务的一种更简单、更简短的方法是使用另一篇文章的答案，如下所示：

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

【讨论】：

【解决方案14】：

试试这个..

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

【讨论】：