JQueryを使用して複数選択の選択値を設定する方法

JQuery の複数選択関数は非常に一般的であり、選択された値の設定も JQuery の複数選択操作の一部です。 JQuery を使用して選択した値を設定すると、操作を迅速に実装し、ユーザーの利便性を向上させ、さまざまな複雑な機能要件を実現できます。

この記事では、JQuery を使用して複数選択の選択値を設定する方法を紹介し、理解を助ける例を使用します。

1. JQuery 複数選択の基本操作

選択された値の設定を開始する前に、JQuery 複数選択の基本操作を理解する必要があります。

1. 選択された値を取得する

JQuery で複数選択ボックスの選択された値を取得することは非常に簡単で、val() メソッドを使用するだけですぐに実現できます。例:

var selectVal = $('input[type=checkbox]:checked').val();

上記のコードは、チェックボックス タイプの選択されたオプションを選択し、選択された値を取得して selectVal 変数に保存します。

2. 選択状態の設定

複数のオプションの選択状態を設定する必要がある場合は、prop() または attr() メソッドを使用するだけです。例:

$('input[type=checkbox]').attr('checked', true);

上記のコード行は、タイプ チェックボックスのすべてのオプションを選択済みに設定します。

3. 選択した数量を取得する

選択した数量を取得することも非常に簡単で、選択したアイテムの配列の長さを使用するだけです (例:

var count = $('input[type=checkbox]:checked').length;

2. 方法選択項目の値を設定するには

基本的な複数選択操作を理解したところで、複数の選択肢の選択値を設定する方法を紹介します。

1. 複数選択の選択値を設定します

複数選択の選択値を設定するには、まず選択項目の内容とオプションの値を決定する必要があります。例:

<input type="checkbox" name="color" value="red">红色
<input type="checkbox" name="color" value="yellow">黄色
<input type="checkbox" name="color" value="blue">蓝色

上記のコードでは、name 属性が color であるオプションは複数のオプションであり、各項目の対応する値はそれぞれ赤、黄、青です。

JQuery を使用してオプションのチェック済みステータスを設定することも非常に簡単で、対応するオプションのチェック済み属性を true に設定するだけです。例:

$('input[name=color][value=red]').prop('checked', true);

上記のコードは、名前属性が color で値が red のオプションを選択状態に設定します。

2. 複数選択の選択値を取得する

複数選択の選択値を取得するには、複数選択グループ全体内の選択されたオプションをフィルターで除外し、その値を使用する必要があります。これらのオプションの値を結果として取得し、配列に追加します。例:

var selected = [];
$('input[name=color]:checked').each(function() {
  selected.push($(this).val());
});

上記のコードは、name 属性が color である選択されたオプションを走査し、各オプションの値を選択された配列に追加します。

3. 実践的なケース

JQuery を使用して複数のオプションの選択値を設定する最も一般的なシナリオは、フォーム操作です。以下は、誰もが学んだ知識をよりよく応用できるようにするための実践的なケースです。

1. HTML コード

<form>
  <label><input type="checkbox" name="hobby" value="swim">游泳</label>
  <label><input type="checkbox" name="hobby" value="run">跑步</label>
  <label><input type="checkbox" name="hobby" value="basketball">篮球</label>
  <label><input type="checkbox" name="hobby" value="football">足球</label>
  <label><input type="checkbox" name="hobby" value="tennis">网球</label>
  <label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
</form>

2. 選択した値を設定し、選択した値を取得します

// 设置选中值
$("form input[name=hobby][value=run]").prop("checked", true);
$("form input[name=hobby][value=football]").prop("checked", true);

// 获取选中值
var hobbyArr = [];
$("form input[name=hobby]:checked").each(function(){
  hobbyArr.push($(this).val());
});
console.log(hobbyArr); // ["run", "football"]

上記のコードは、name 属性を Hobby に設定し、値を run に設定します。オプションが選択され、選択されたすべての値が出力用の配列に保存されます。

4. 概要

上記は、JQuery で複数選択オプションの選択値を設定する方法の概要です。この記事の例を通じて、読者は JQuery の複数選択の基本操作と、複数のオプションの選択値を設定する方法をより深く理解できます。優れた JavaScript フレームワークである JQuery の強力な操作と便利な構文により、Web 開発がより効率的になります。

以上がJQueryを使用して複数選択の選択値を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。