質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • PHP

    24037questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

【HTML/PHP】checkboxでchecked属性をchecked=""としているのにチェックされてしまう。

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 146

WeilSpinor

score -33

checkboxのchecked属性をchecked=""、checked="checked"という形式で「未チェック状態」を指定したいのですが、
なぜか、checked=""としても、デフォルトでチェックが入ってしまいます。

<input type="checkbox" checked="">


これでページを読み込むと、チェック済のチェックボックスが現れます。

checked=""をすべて消してみると、未チェックで現れてくれますが、
色々事情があって、checked=""の形式で未チェック指定をしたいのです。

どうも、checked=""のうちの、=""の部分が無視されていて、checkedという文字の羅列を見た瞬間、デフォルトチェックが効いてしまっているかのような感じです。

どうすればいいでしょうか?ご回答宜しくお願いします。

環境は、以下の通りです:
chrome/windows10

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2019/05/16 07:09

    checked=""の形式で未チェック指定をしたい「事情」とは、どのようなものでしょうか。

    キャンセル

回答 3

+4

ある場合はオンだからではないでしょうか。

【<input type="checkbox"> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/checkbox#Additional_attributes

checked     論理型。存在する場合、チェックボックスは既定でオンの状態


追記: 下記ページ回答にサンプルコードがありますが、どのような値を入れてもcheckedがあれば既定でオンの状態になります。

【html - What values for checked and selected are false? - Stack Overflow】
https://stackoverflow.com/questions/4228658/what-values-for-checked-and-selected-are-false

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/16 10:17

    ご回答ありがとうございます。
    おっしゃる通りどうも勘違いだったみたいです。

    あるサイト(どこかの大学の講義資料?)で
    「checkedかchecked=“”かchecked=“checked”で指定する」
    とあったので、後半二つをfalse or trueの対比だと思って、
    checked=“”は未チェックに対応すると思ってしまいました。でも、上3つは全てチェック済みの結果を出すそうですね。

    個人的には、W3Cはなぜこんな不自然とも言えるややこしい記述法を用意したのか疑問ですが、きっと何か理由があるんでしょうね。

    キャンセル

  • 2019/05/17 13:49

    >W3Cはなぜこんな不自然とも言えるややこしい記述法を用意したのか
    むしろ「checkedがあればチェック入れる、なければチェック入れない」という非常にシンプルな記法に思いますが?そのサイトとやらの説明が紛らわしく書いてあるだけです。
    プログラムはプログラムの仕様通りにしか動かないので「思う」だけではなく色々パターンを自分で作って試せば良いだけの話です。W3Cに疑問を呈するのは違うと思います。

    キャンセル

+3

既に回答があるように仕様通りの挙動。
仕様通りなのでどんなに属性値で対応したくても無理。

htmlですぐ動かせるんだから色んなパターン試せばいい話。

<input type="checkbox" name="a[]">
<input type="checkbox" name="a[]" checked>
<input type="checkbox" name="a[]" checked="">
<input type="checkbox" name="a[]" checked="checked">
<input type="checkbox" name="a[]" checked="on">
<input type="checkbox" name="a[]" checked="of">
<input type="checkbox" name="a[]" checked="hoge">
<input type="checkbox" name="a[]" checked="test">
<input type="checkbox" name="a[]" checked="true">
<input type="checkbox" name="a[]" checked="false">


結果はご自身の環境で確かめてください。

どうすればいいでしょうか

未チェックのときはそもそもchecked属性を置かない。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

どうしてもというならjavascriptで

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('[type=checkbox]'),function(x){
    x.checked=x.getAttribute('checked')!=="";
  });
});
</script>
<input type="checkbox" checked="">
<input type="checkbox" checked>
<input type="checkbox" checked="checked">


checked属性になにも入っていなければcheckedを外します

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    24037questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。