jquery获取一组checkbox的值(实例代码)

下面是详细讲解“jquery获取一组checkbox的值(实例代码)”的完整攻略。

1. 前提准备

在实现获取一组checkbox的值的功能之前，我们需要确保页面上已经存在需要操作的checkbox元素，并且需要引入jQuery库。可以使用以下代码在页面底部引入jQuery：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

同时，我们需要在页面上添加一个按钮，用于获取checkbox的值并进行其他操作。可以使用以下代码添加按钮：

<button id="btn">获取选中的值</button>

2. 获取一组checkbox的值

接下来，我们需要编写jQuery代码来获取一组checkbox的值。代码如下：

$(function() {
  // 获取选中的checkbox的value值
  $('#btn').click(function() {
    var result = [];
    $('input[name="checkbox"]:checked').each(function() {
      result.push($(this).val());
    });
    console.log(result.join(','));
  });
});

通过上述代码可以得知，我们可以通过元素选择器选中所有name属性为“checkbox”的checkbox元素，并使用:checked伪类选中它们中被选中的元素。最后，我们把选中元素的value值放入一个数组中，并使用join方法将数组转换为字符串并输出到控制台。

3. 示例说明

在实际开发中，我们如果要获取一组checkbox的值，可以按照以下步骤操作：

示例一：提交选中的checkbox

<form id="myform">
  <input type="checkbox" name="checkbox" value="1">选项1
  <input type="checkbox" name="checkbox" value="2">选项2
  <input type="checkbox" name="checkbox" value="3">选项3
  <br>
  <button type="button" id="btn">提交</button>
</form>

$(function() {
  // 提交选中的checkbox
  $('#btn').click(function() {
    var result = [];
    $('input[name="checkbox"]:checked').each(function() {
      result.push($(this).val());
    });
    $('#myform').append($('<input>').attr({type: 'hidden', name: 'checked_values', value: result.join(',')})).submit();
  });
});

通过上述代码可以看到，我们可以编写JavaScript代码将选中的checkbox的值放入一个隐藏域中，并在表单提交时提交这个隐藏域，这样就可以将所有选中的值一起提交到后端进行处理。

示例二：根据选中的checkbox选中对应的单选框

<input type="checkbox" name="checkbox" value="1">选项1
<input type="radio" name="radio" value="A" class="radio-1">单选框A
<input type="radio" name="radio" value="B" class="radio-1">单选框B

<input type="checkbox" name="checkbox" value="2">选项2
<input type="radio" name="radio" value="C" class="radio-2">单选框C
<input type="radio" name="radio" value="D" class="radio-2">单选框D
<br>
<button type="button" id="btn">提交</button>

$(function() {
  // 根据选中的checkbox选中对应的单选框
  $('input[type="checkbox"]').change(function() {
    if ($(this).prop('checked')) {
      $('.' + $(this).attr('class')).prop('checked', true);
    } else {
      $('.' + $(this).attr('class')).prop('checked', false);
    }
  });

  // 提交选中的checkbox和单选框的值
  $('#btn').click(function() {
    var result = [];
    $('input[name="checkbox"]:checked').each(function() {
      var name = $(this).attr('class').replace('checkbox', 'radio');
      result.push($('input[name="' + name + '"]:checked').val());
    });
    console.log(result);
  });
});

通过上述代码可以看到，我们可以根据选中的checkbox选中对应的单选框。同时，我们也可以编写JavaScript代码获取所有选中的checkbox和对应的单选框的值，并进行其他操作。这个例子可以帮助大家理解如何对选中的checkbox进行进一步操作。