関連するボタンで正しい非表示の入力を表示することになると、私はいくつかの助けが必要です
ここで表示できるアプリケーションがあります
アプリケーションを使用するには、以下の手順に従ってください。
- 「グリッドを開く」リンクをクリックしてボタン「5」を選択すると、5つのボタン「AE」が下に表示されます。
- ボタン「A」および「C」をクリックすると、これらのボタンが緑色に変わり、オンになったことを意味します。
- 次に、[質問を追加]ボタンをクリックして、行ったことを下の表の行に追加します。
- ここでもう一度手順1〜3を繰り返しますが、今回はボタン「7」を選択してボタン「AG」を表示し、ボタン「B」、「D」、「F」をクリックしてこれらのボタンをオンにします。
これで、2つのテーブル行があり、最初のテーブル行にはボタン「A」と「C」がオンになっており、2番目の行にはボタン「B」、「D」、「F」がオンになっていることがわかります。
今私がやりたいのは、（$ _ POSTメソッドを使用して）オンになっているボタンだけを投稿することです。$ _POSTメソッドを使用してボタンを投稿することはできませんが、ボタンごとに非表示の入力フィールドを作成して投稿することができます。ボタンがオンの場合、非表示の入力の値は1です。オフの場合、非表示の入力の値は1です。値は0です。
しかし、これを正しくコーディングしているかどうかはわかりません。私の質問は、誰かが以下のコードを確認して、以下のコードが機能するかどうか、またはそれが機能するために微調整が必要かどうかを述べることができるということです。非表示の入力が関連するボタンで正しくないことを心配しています：
以下は、トップオプションと回答コントロールの文字ボタンとその非表示の入力を出力するコードです。
<table id="optionAndAnswer" class="optionAndAnswer">
<tr>
<table id="answerSection">
<tr>
<?php
$i = 1;
foreach($a as $key => $val){
if($i%7 == 1) echo"<tr><td>";
echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answerName[$val]\" class=\"answerBtns answers answerBtnsOff\">";
echo"<input type=\"hidden\" value=\"0\" id=\"hiddenAnswer".$val."\" name=\"hidden[$val]\" class=\"offButtons\">";
if($i%7 == 0) echo"</td></tr>";
$i++;
}
?>
</tr>
<tr>
<td>
<input class="answerBtns answers answerBtnsOff" name="answerName[True]" id="answerTrue" type="button" value="True" onclick="btnclick(this);"/>
<input class="offButtons" name="hidden[True]" id="hiddenAnswerTrue" value="0" type="hidden"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[False]" id="answerFalse" type="button" value="False" onclick="btnclick(this);"/>
<input class="offButtons" name="hidden[False]" id="hiddenAnswerFalse" value="0" type="hidden"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[Yes]" id="answerYes" type="button" value="Yes" onclick="btnclick(this);"/>
<input class="offButtons" name="hidden[Yes]" id="hiddenAnswerYes" value="0" type="hidden"/>
<input class="answerBtns answers answerBtnsOff" name="answerName[No]" id="answerNo" type="button" value="No" onclick="btnclick(this);"/>
<input class="offButtons" name="hidden[No]" id="hiddenAnswerNo" value="0" type="hidden"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
以下は、トップコントロールから文字ボタンと非表示の入力を出力し、テーブル行に追加するコードです（ユーザーは必要に応じてテーブル行の文字ボタンをオンまたはオフにできます）。
function insertQuestion(form) {
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td class='extratd'>");
var $answer = $("<div class='answer'>3. Answer:<br/></div>");
var $this, $row, $cell;
$('#optionAndAnswer .answers').each(function(i, v) {
$this = $(this);
if(i%7 == 0) {
$row = $("<tr/>").appendTo($answer);
$cell = $("<td/>").appendTo($row);
}
var v = $this.val();
var a = { name:$this.attr('name'), value:$this.val(), class:$this.attr('class'), id:$this.attr('id')+'Row' };
var h = $this.is(':visible')?'inline-block':'none'
var $newBtn = $("<input type='button' style='display:" + h + "' onclick='btnclick(this);' />").attr(a);
var $newHdn = $("<input type='hidden' value='0' id='hiddenAnswer" + v + "' name='hidden[" + v + "]' class='offButtons' />");
$newBtn.appendTo($cell);
$newHdn.appendTo($cell);
});
$tr.append($td);
$td.append($answer);
$tbody.append($tr);
}
最後に、文字ボタンとそれに関連する非表示の入力をオンまたはオフにするコードを以下に示します。
function btnclick(btn)
{
var context = $(btn).parents('#optionAndAnswer');
if (context.length == 0) {
context = $(btn).parents('tr');
}
var $btn = $(btn);
var value = btn.value;
$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");
var hiddenId = '#hiddenAnswer'+btn.value;
if ( $(btn).hasClass("answerBtnsOff") )
{
$(hiddenId).val('0');
$(hiddenId).toggleClass('offButtons');
$(hiddenId).toggleClass('onButtons');
}
else
{
$(hiddenId).val('1');
$(hiddenId).toggleClass('onButtons');
$(hiddenId).toggleClass('offButtons');
}
$('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : 0);
return false;
}