时间戳

首页 > 解决方案 > Jquery如何找出我是否有一个选中的复选框然后将其放入if语句中

jquery - Jquery如何找出我是否有一个选中的复选框然后将其放入if语句中

问题描述

我是 Jquery 的新手，下面的代码将检查是否选中了任何复选框。我想做的是得到结果然后（检查/未检查）将其放入 if 语句中（获取真或假或检查/未检查并将其放入变量中，以便我可以使用 if陈述

$("#treeview .k-item input[type=checkbox]:checked").closest(".k-item");

例如，我想做类似下面的事情

var isChecked = $("#treeview .k-item input[type=checkbox]:checked").closest(".k-item");

if (isChecked == true)
   {
     // I know it's true do something
    } else {
         // It's false do something else
         }

标签： jquery

解决方案

该演示将：

  • 收集所有带有 jQ​​uery 选择器扩展的复选框:checkbox。

  • 记录每个复选框的 id，如果复选框被选中，值将被记录并存储在Map Object中。

  • 所有未选中的复选框值都记录在地图对象中为空。

  • 在更改事件中，每个复选框将被包装在一个标签中。

  • 每个复选框标签将在左侧显示复选框的 id，在右侧显示值。这是由 CSS 函数完成的attr()

演示

Demo中评论的详细信息

/* Register all checkboxes to the change event
|| Invoke the checkCheckbox() callback function
|| and pass its return value through to displayMap() function
*/
$(':checkbox').on('change', function() {

  // Create an ES6 Map
  var map = new Map();
  var m = checkCheckbox(map);
  displayMap(m);
});

// Pass the Map through
function checkCheckbox(map) {

  // On each checkbox...
  $(':checkbox').each(function(idx) {

    //...store the total number of checkboxes...
    var qty = $(':checkbox').length;

    //...store the last index number created...
    var num = idx + qty;

    // if this checkbox doesn't have an id...
    if (!$(this).attr('id')) {

      //...then assign an id to it and...
      $(this).attr('id', `chx${num}`);

      //...create a string of a label...
      var str = $(`<label for="${this.id}"><b data-val="${this.value}"></b></label>`);

      /*...insert label string after checkbox then 
      || insert the checkbox as the first child of label
      */
      $(this).after(str);
      str.prepend($(this));
    }
    // if this checkbox is checked...
    if ($(this).is(':checked')) {

      //...get its value...
      var val = $(this).val();

      //...set its value within the Map...
      map.set(this.id, val);

      // ...otherwise...
    } else {

      //...set its value to Map as null
      map.set(this.id, null);
    }
  });
  return map;
}


// Utility function that displays a Map to console
function displayMap(map) {
  for (let [key, value] of map) {
    console.log(key + '=' + value);
  }
}
label {
  border: 3px outset grey;
  border-radius: 5px;
  white-space: nowrap;
  padding: 0 5px 0 0;
  display: inline-block;
  width: 25%;
}

label::before {
  content: '\a0'attr(for)
}

b::after {
  content: 'null';
}

input[type=checkbox]:checked+b::after {
  content: attr(data-val)
}

.as-console-wrapper {
  max-height: 70px !important;
}
<input type='checkbox' value='1'>
<input type='checkbox' value='true'>
<input type='checkbox' value='on'>
<input type='checkbox' value='z0' checked>
<input type='checkbox' value='1' checked>
<input type='checkbox' value='89m' checked>
<input type='checkbox' value='1'>
<input type='checkbox' value='cajun' checked>
<input type='checkbox' value='00'>
<input type='checkbox' value='v' checked>
<input type='checkbox' value='1'>
<input type='checkbox' value='A' checked>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

推荐阅读