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

Question

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

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

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

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

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

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

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

Comments

[maisumakun]

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

Answer 1

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

【<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

Comments

[WeilSpinor]

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

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

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

[m.ts10806]

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

Answer 2

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

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属性を置かない。

Answer 3

どうしてもというなら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を外します