获取jQuery中的复选框值

15 回答

• 52

  要获取Value属性的值，您可以执行以下操作：

  $("input[type='checkbox']").val();
  

  或者，如果您为其设置了 class 或 id ，则可以：

  $('#check_id').val();
  $('.check_class').val();
  

  但是，无论是否检查，这都将返回 same 值，这可能会令人困惑，因为它与提交的表单行为不同 .

  要检查是否已选中，请执行以下操作：

  if ($('#check_id').is(":checked"))
  {
    // it is checked
  }
  

  回复于 2024-04-28T21:36:21+08:00
• 5

  这两种方式正在发挥作用：

  • $('#checkbox').prop('checked')

  • $('#checkbox').is(':checked') （感谢@mgsloan）

  $('#test').click(function() {
      alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
      alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
  });
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  Check me: <input id="test" type="checkbox" />
  

  回复于 2024-04-28T21:36:21+08:00
• 11

  尝试这个小解决方案：

  $("#some_id").attr("checked") ? 1 : 0;
  

  要么

  $("#some_id").attr("checked") || 0;
  

  回复于 2024-04-28T21:36:21+08:00
• 23

  检索复选框值的唯一正确方法如下

  if ( elem.checked ) 
  if ( $( elem ).prop( "checked" ) ) 
  if ( $( elem ).is( ":checked" ) )
  

  正如jQuery网站上的官方文档中所解释的那样 . 其余的方法与复选框的 property 无关，他们正在检查属性，这意味着他们正在测试加载时复选框的初始状态 . 简而言之：

  • 当你拥有元素并且你知道它是一个复选框时你可以简单地读取它的属性而你不需要jQuery（即 elem.checked ），或者你可以使用 $(elem).prop("checked") 如果你想依赖jQuery .

  • 如果您需要知道（或比较）元素首次加载时的值（即默认值），正确的方法是 $(elem).is(":checked") .

  答案有误导性，请自行检查以下内容：

  http://api.jquery.com/prop/

  回复于 2024-04-28T21:36:21+08:00
• 7

  只是为了澄清事情：

  $('#checkbox_ID').is(":checked")
  

  将返回'true'或'false'

  回复于 2024-04-28T21:36:21+08:00
• 9

  $('#checkbox_id').val();
  $('#checkbox_id').is(":checked");
  $('#checkbox_id:checked').val();
  

  回复于 2024-04-28T21:36:21+08:00
• 6

  jQuery(".checkboxClass").click(function(){
          var selectedCountry = new Array();
          var n = jQuery(".checkboxClass:checked").length;
          if (n > 0){
              jQuery(".checkboxClass:checked").each(function(){
                  selectedCountry.push($(this).val());
              });
          }
          alert(selectedCountry);
      });
  

  回复于 2024-04-28T21:36:21+08:00
• 13

  简单但有效，并假设您知道将找到该复选框：

  $("#some_id")[0].checked;
  

  给予 true / false

  回复于 2024-04-28T21:36:21+08:00
• 0

  尽管这个问题是要求jQuery解决方案，但这是一个纯JavaScript的答案，因为没有人提到它 .

  没有jQuery：

  只需选择元素并访问checked property（返回布尔值） .

  var checkbox = document.querySelector('input[type="checkbox"]');
  
  alert(checkbox.checked);
  

  <input type="checkbox"/>
  

  ---

  以下是收听 change 事件的快速示例：

  var checkbox = document.querySelector('input[type="checkbox"]');
  checkbox.addEventListener('change', function (e) {
      alert(this.checked);
  });
  

  <input type="checkbox"/>
  

  ---

  要选择选中的元素，请使用:checked pseudo class（ input[type="checkbox"]:checked ） .

  下面是一个示例，它迭代已检查的 input 元素并返回已检查元素名称的映射数组 .

  Example Here

  var elements = document.querySelectorAll('input[type="checkbox"]:checked');
  var checkedElements = Array.prototype.map.call(elements, function (el, i) {
      return el.name;
  });
  
  console.log(checkedElements);
  

  var elements = document.querySelectorAll('input[type="checkbox"]:checked');
  var checkedElements = Array.prototype.map.call(elements, function (el, i) {
      return el.name;
  });
  
  console.log(checkedElements);
  

  <div class="parent">
      <input type="checkbox" name="name1" />
      <input type="checkbox" name="name2" />
      <input type="checkbox" name="name3" checked="checked" />
      <input type="checkbox" name="name4" checked="checked" />
      <input type="checkbox" name="name5" />
  </div>
  

  回复于 2024-04-28T21:36:21+08:00
• 1

  //By each()
  var testval = [];
   $('.hobbies_class:checked').each(function() {
     testval.push($(this).val());
   });
  
  
  //by map()
  var testval = $('input:checkbox:checked.hobbies_class').map(function(){
  return this.value; }).get().join(",");
  
   //HTML Code
  
   <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
    <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
  

  Example Demo

  回复于 2024-04-28T21:36:21+08:00
• 787

  以下是如何将 all checked checkboxes 的值作为数组：

  var values = (function() {
                  var a = [];
                  $(".checkboxes:checked").each(function() {
                      a.push(this.value);
                  });
                  return a;
              })()
  

  回复于 2024-04-28T21:36:21+08:00
• 1

  $（' . class [value = 3]'） . prop（'checked'，true）;

  回复于 2024-04-28T21:36:21+08:00
• 0

  使用以下代码：

  $('input[name^=CheckBoxInput]').val();
  

  回复于 2024-04-28T21:36:21+08:00
• 1

  <script type="text/javascript">
  $(document).ready(function(){
      $('.laravel').click(function(){
          var val = $(this).is(":checked");
          $('#category').submit();
      });
  });
  

  <form action="{{route('directory')}}" method="post" id="category">
                          <input type="hidden" name="_token" value="{{ csrf_token() }}">
                          <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                        </form>
  

  回复于 2024-04-28T21:36:21+08:00
• 171

  直到2018年的今天，由于api多年来的变化，才引起注意 . removeAttr被删除，不再工作了！

  Jquery选中或取消选中复选框：

  不好，不再工作了 .

  $('#add_user_certificate_checkbox').removeAttr("checked");
  
     $('#add_user_certificate_checkbox').attr("checked","checked");
  

  相反，你应该这样做：

  $('#add_user_certificate_checkbox').prop('checked', true);
        $('#add_user_certificate_checkbox').prop('checked', false);
  

  回复于 2024-04-28T21:36:21+08:00