サポート » 使い方全般 » inputのチェックボックスがうまくチェックできない

  • 解決済 ssk316

    (@ssk316)


    お世話になります。
    inputのチェックボックスが正常に作動する箇所とうまくチェックできない箇所がありまして、これについてご助言いただければと思い投稿されていただいております。

    http://rug-select.com/
    こちらの通販サイトを自分で作成し運営しているのですが、サイドバーにある絞り込み検索のチェックボックスをクリックしてもチェックがされません。
    CSSでチェックボックスを調整しており、CSSで調整していない通常のチェックボックスで試すと正常に作動するので、CSSが原因かもしれません。
    しかし同じclass属性で調整している、スマホ表示のヘッダーに表示される、同様の絞り込み検索のチェックボックスは正常に作動します。

    なぜ一方が正常に動いて一方が動かないのか、自分ではわかりませんでした。
    どなたかお分かりになる方いらっしゃいましたら、ご回答いただければ幸いです。

    よろしくお願いいたします。

    • このトピックはssk316が6年、 9ヶ月前に変更しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは、

    htmlソースの356行と、753行で IDの重複があるようですが、どちらかをまず外してみてはどうでしょう。

    cssではなくhtml的な原因かと思われます。
    nobita様のおっしゃるとおりIDに重複があることが原因で、<label for=”xxx”>と<input id=”xxx”>のid指定は1対1の関係でなくてはならないのですが、それが重複しているため見た目不動作になっています。

    正確に言うと動作はしていますが、サイドナビのチェックボックスを押すと、画面上部にある方のチェックボックスが反応しているのです。(idは上からサーチされるため)
    スマホ表示にするか、PCの検証機能などで上部のチェックボックス群を仮に表示してみればそうなっていることが確認できるかと思います。

    解決策としては、どちらかの<label for=””>と<input id=””>を同時に変えるということになるかと思います。例えばヘッダにある方をsp_checkbox01〜にするとかですね。

    トピック投稿者 ssk316

    (@ssk316)

    nobita様

    早速のご回答ありがとうございます。
    nobita様がおっしゃるようにidの重複が原因でした。
    おかげさまで修正が完了し、正常に作動するようになりました。
    ありがとうございました。

    トピック投稿者 ssk316

    (@ssk316)

    hirutsuki様

    ご丁寧なご回答ありがとうございます。
    hirutsuki様、nobita様がおっしゃるようにidの重複が原因でした。
    いただいたとおりヘッダー側のidとlabelを修正し、重複を解消することで正常に作動するようになりました。
    ありがとうございました。

    • この返信は6年、 9ヶ月前にssk316が編集しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「inputのチェックボックスがうまくチェックできない」には新たに返信することはできません。