初期チェックボックスをオンにしたときに複数のチェックボックスが表示される（PHP/Javascriptを使用）

私のプログラムの一部を実装しようとしていますが、初期チェックボックスをクリックすると、。複数のチェックボックスを作成するためにforloop（または動的に）を使用したくないのですが、手動で作成する必要があります。初期チェックボックスをオンにしたときに複数のチェックボックスが表示される（PHP/Javascriptを使用）

私のプログラムは以下の通りですが、なぜ動作しないのか分かりません。誰かが私の間違いを私に指摘してくれることを親切に言えば、私は大いに感謝するでしょう。私はPHP/JavaScriptに熟練していません。

ありがとうございます！

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    //set initial state. 
    $('#checkbox').val($(this).is(':unchecked')); 

    $('#checkbox').change(function() { 
     if($(this).is(":checked")) { 
      var box = document.createElement("div"); 
      box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox; 
      document.myForm.appendChild(box); 
      hasBox = true; 
     } 
    }); 
}); 
</script> 
</head> 
<body> 

<p>Click on this paragraph.</p> 
<form action=""> 
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br> 

</body> 
</html>

出典

2016-10-23 Jim

あなたは正しいトラックにいます。

コードにいくつか問題があります。

1）新しいチェックボックスタグを引用符で囲むのを忘れてしまった。

box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;

は次のようになります。

box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";

はまた、私は作り付けの小道具を使用するチェックボックスの初期状態を設定するにはタイプからの変更「chkbox」に「チェックボックス」

2）注意しますJQueryの関数たとえば：むしろ、あなたのコードよりも

$('#checkbox').prop('checked', false);

：フォームに新しいチェックボックスを追加するとき

$('#checkbox').val($(this).is(':unchecked'));

3）最後の問題があります。私はこれを行うような方法は、再びjQueryのを使用している：

$("#myForm").append(box);

とフォーム要素に「あるmyForm」のIDを与えるを

を要件に働く私の完全なコードの下に見つけてください：

$(document).ready(function() { 
 
    //set initial state. 
 
    $('#checkbox').prop('checked', false); 
 

 
    $('#checkbox').on('click', function() { 
 
    if($(this).is(":checked")) { 
 
     var box = document.createElement("div"); 
 
     box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>"; 
 
     $("#myForm").append(box); 
 
     hasBox = true; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<p>Click on this paragraph.</p> 
 
<form action="" id="myForm"> 
 
    <input id="checkbox" name="click" type="checkbox"/>initial checkbox<br> 
 
</form>

は、あなたが、これは重宝することを願っています。

出典

2016-10-23 02:07:07 creeperdomain

素敵な説明を。ここで私の投票を得た:) – Dekel

あなたは31ポイントを持っている人のために、あなたはプロのように答えた。 +1 –

Hmmm、最初のボックスがチェックされていないときにセカンダリボックスを隠す方法があると便利です。 – Jim

また、CSSでこれを行うことができます。

.secondary-checkboxes 
 
{ 
 
    display: none; 
 
} 
 

 
.primary-checkbox:checked ~ .secondary-checkboxes 
 
{ 
 
    display: initial; 
 
}

<input type="checkbox" class="primary-checkbox"> Primary checkbox 
 
<br> 
 
<div class="secondary-checkboxes"> 
 
    <input type="checkbox"> Secondary checkbox 1 
 
    <br> 
 
    <input type="checkbox"> Secondary checkbox 2 
 
    <br> 
 
    <input type="checkbox"> Secondary checkbox 3 
 
    <br> 
 
</div>

出典：thisスタックオーバーフローの質問

出典

2016-10-23 02:22:00 user48147

これは、プライマリチェックボックスを選択するとページ内のすべてのセカンダリチェックボックスが表示されるという問題があります。一般的な兄弟セレクタ（〜）を避け、隣接する兄弟セレクタ（+）を代わりに使用するには、プロパティーcontent： '';でセカンダリチェックボックスの:: before疑似セレクタを使用できます。表示ブロック;そうすることで、あなたはbrを取り除くことができます。 – user48147

初期チェックボックスをオンにしたときに複数のチェックボックスが表示される（PHP/Javascriptを使用）

答えて

関連する問題