jqueryで複数選択ボックスの値を取得する方法（メソッドの簡単な分析）

フロントエンド開発では、処理のためにチェックボックスの値を取得したり、チェックボックスが選択されているかどうかを判断したりすることが必要になることがよくあります。 jQuery は、複数選択ボックスの値を簡単に取得できる豊富な API を提供する非常に人気のある JavaScript ライブラリです。この記事ではjQueryを使って複数選択ボックスを取得する方法を紹介します。

1. 選択された複数選択ボックスのステータス

複数選択ボックスの値を取得する前に、まず複数選択ボックスのステータスを理解する必要があります。 、チェックされている (チェックされている) またはチェックされていない (チェックされていない) )。 .prop() メソッドを使用して、複数選択ボックスの選択状態を取得または設定できます。以下に例を示します。

<input type="checkbox" id="checkbox1" value="value1" checked>
<label for="checkbox1">选项1</label>

// 获取checkbox1的选中状态
const isChecked = $('#checkbox1').prop('checked');
console.log(isChecked); // 输出true

上記の例の出力結果は true で、複数選択ボックスが選択されていることを示します。複数選択ボックスのチェック属性を未チェックに変更すると、出力結果は false になります。

2. 複数選択ボックスの値を取得する

複数選択ボックスの値を取得する必要がある場合は、次のメソッドを使用できます:

1. .each() メソッドを使用する複数選択ボックスの走査

jQuery の .each() メソッドを使用して、選択されたすべての複数選択ボックスを走査し、その値属性を取得して、これらの値を保存できます。配列で。以下に例を示します。

<input type="checkbox" id="option1" value="value1" checked>
<label for="option1">选项1</label>

<input type="checkbox" id="option2" value="value2" checked>
<label for="option2">选项2</label>

<input type="checkbox" id="option3" value="value3">
<label for="option3">选项3</label>

// 获取所有选中的多选框的值，并存储到数组中
const selectedOptions = [];
$('input[type=checkbox]:checked').each(function() {
  selectedOptions.push($(this).val());
});
console.log(selectedOptions); // 输出["value1", "value2"]

上記のコードは、セレクターを使用して、選択されたすべての複数選択ボックスを選択します。 .each() メソッドを使用して、選択された各複数選択ボックスを走査し、これらの複数選択ボックスの value 属性を配列に追加します。

2. .serializeArray() メソッドを使用して、選択した複数選択ボックスの値を取得します

.each() メソッドの使用に加えて、jQuery の .serializeArray を使用することもできます。 () メソッドで選択された値を取得します。 チェックボックスの値。このメソッドは、選択されたすべてのチェックボックスの値を含む配列を返します。以下に例を示します。

<input type="checkbox" id="choice-1" name="choice" value="1" checked>
<label for="choice-1">选项1</label>

<input type="checkbox" id="choice-2" name="choice" value="2" checked>
<label for="choice-2">选项2</label>

<input type="checkbox" id="choice-3" name="choice" value="3">
<label for="choice-3">选项3</label>

// 获取选中的多选框的值
const selectedValues = $('input[name="choice"]:checked').serializeArray();
console.log(selectedValues); // 输出[{name: "choice", value: "1"}, {name: "choice", value: "2"}]

上記のコードは、セレクターを使用して、選択されたすべての複数選択ボックスを選択します。ここでは、 .name 属性を使用して複数選択ボックスを選択し、 .serializeArray() メソッドを使用して選択された複数選択ボックスの値を取得します。

3. 結論

上記の導入を通じて、jQuery を使用して複数選択ボックスの値を取得する方法を知ることができます。 .each() メソッドを使用する場合でも、.serializeArray() メソッドを使用する場合でも、複数選択ボックスの値を適切に処理できます。ただし、これを使用する場合は、独自のビジネス ロジックをより適切に実装するために、実際の状況に基づいて選択する必要があります。

以上がjqueryで複数選択ボックスの値を取得する方法（メソッドの簡単な分析）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。