LoginSignup

Qiita Conference 2025

Qiita史上最多！豪華12名のゲストが登壇

特別講演ゲスト（敬称略）

ymrl、成瀬允宣、鹿野壮、伊藤淳一、uhyo、徳丸浩、ミノ駆動、みのるん、桜庭洋之、tenntenn、けんちょん、こにふぁー

特設サイトで詳細をチェック
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@fujikenbotebote(bote)

配列Form部品のうち入力がない要素の取得方法

Posted at

やりたいこと

同じnameのinput要素が複数並んでいるときにvalueが設定されていないもののうち最初のものをquerySelectorで取得したい。
querySelectorAllを利用してNodeListとして取得したうえで絞り込むことはできるができればセレクタ一発でとりたい。

パターン①　属性セレクタでvalueを指定する

コード

セレクタ [value=""] もしくは :not([value]) を指定する

長所

valueが指定されていないというのが直感的にわかりやすい

短所

valueが指定されていないかvalue=""で明示されているかのいずれかしか取れない

パターン②　疑似クラス:invalidを利用する

方法

取得対象のinputタグにrequired属性を設定したうえで、セレクタ :invalid を指定する。

長所

パターン①のいずれにも対応できる。

短所

ほかにバリデーションを指定している場合などに利用できない。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
fujikenbotebote

@fujikenbotebote(bote)

java/PHPをメインに使っているSEです。 基本情報・応用情報・情報セキュリティスペシャリスト・DBスペシャリスト
RSS

Today's trending articles

See all

Comments

ffgogfb454
@ffgogfb454

短所
valueが指定されていないかvalue=""で明示されているかのいずれかしか取れない

カンマで区切ってOR扱いすればいいのでは？

<input type="text" class="input_class" value="ほげ" required>
<input type="text" class="input_class" value="" required>
<input type="text" class="input_class" required>

<script>
  document.querySelector('.input_class[value=""],.input_class:not([value])')
    ?.style.setProperty('background-color', 'red');
</script>
0

Let's comment your feelings that are more than good

LoginSign Up

Qiita Conference 2025 will be held!: 4/23(wed) - 4/25(Fri)

Qiita Conference is the largest tech conference in Qiita!

Keynote Speaker

ymrl、Masanobu Naruse, Takeshi Kano, Junichi Ito, uhyo, Hiroshi Tokumaru, MinoDriven, Minorun, Hiroyuki Sakuraba, tenntenn, drken, konifar

View event details

Being held Article posting campaign

All
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address

Login with your email addressSign up with your email address