私は自分の質問に対する答えをグーグルで検索して検索してきましたが、これまでのところ成功していません。どなたか助けていただけると幸いです。
私の目標は、選択したラジオ ボタン className を含むテーブルを、ラジオが選択されたときに「選択済み」に変更され、ラジオが選択されていないときに「コンテナー」に変更されるようにすることです。
「container」のclassNameを持つテーブルを保持するクラス名「dividend」を持つ10個のdivがあり、その中に2つの小さなテーブルがあります。下部のコンテナ テーブル内には、「page1」という名前の非表示のラジオ ボタンがあります。次に、同じものの別の 10 ですが、入力名は「page2」です。
ユーザーがラジオボタンの代わりにテーブル全体を選択できるように、コンテナーテーブルの onClcick を作成しましたが、選択したコンテナーのスタイルを変更して、ユーザーが選択したことを認識できるようにしています。
私はいくつかの異なる方法を試しましたが、書くだけでスタイルを新しいクラスに変更できました
document.getElementById('container').className = 'selected';
ただし、10 個の div はすべて同じ名前を共有しているため、最初に見つかった要素のスタイルのみが変更されます。
そこで、このループを作成して、ドキュメントに選択されたラジオがあるかどうかを確認し、それ以外の名前のスタイルをデフォルトとして変更しようとしました。
私はそれが何かばかげていると確信していますが、私はかなり困惑しています..どんな助けもいただければ幸いです。
ありがとう。
//check for check = true
selected = function () {
var divs = document.getElementByTagName('DIV'),
div,
tbl = divs.getElementById('TABLE'),
rad,
stat,
i;
for (var i = 0; i < divs.length; i++) {
// no .id but the counter of the loop
div = div[i];
// check the className not the div element
if (div.className == 'dividend') {
rad = tbl.getElementsByTagName('INPUT');
if (tbl.className == 'container') {
if (rad[0].checked == true) {
tbl.className = 'selected';
}
}
}
}
};
// Gets radio button for selected element in Page1 and checks
function P1sClick(n){
document.forms["myform"]["page1"][n].checked=true;
selected();
};
// Gets radio button for selected element in Page2 and checks
function P2sClick(n){
document.forms["myform"]["page2"][n].checked=true;
};
////////////HTML I only included 2 examples of the DIVs because its a lot of code/////
<form name="myform" action="sample.asp" method="POST">
<h2>Page 1</h2>
<div class="dividend>
<table class="container" onclick="P1sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top" >
<table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="25" style="border-bottom:1px solid #000; border- right:1px solid #000;">1</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
<tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
</table>
</td><td valign="top">
<table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="25" style="border-bottom:1px solid #000;">5</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000;">6</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000;">7</td></tr>
<tr><td height="25">8</td></tr>
</table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x4<br><input type="radio" name="page1" title="4 by 4" value="4x4" style="display:none;"></td></tr></table>
</div>
<div class="dividend">
<table class="container" onclick="P2sClick(0)" cellpadding="0" cellspacing="0"><tr><td valign="top">
<table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">1</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">2</td></tr>
<tr><td height="25" style="border-bottom:1px solid #000; border-right:1px solid #000;">3</td></tr>
<tr><td height="25" style="border-right:1px solid #000;">4</td></tr>
</table>
</td><td valign="top">
<table class="grid" cellpadding="0" cellspacing="0">
<tr><td width="40" height="33" style="border-bottom:1px solid #000;">5</td></tr>
<tr><td height="33" style="border-bottom:1px solid #000;">6</td></tr>
<tr><td height="34">7</td></tr>
</table>
</td></tr>
<tr><td colspan="2" align="center" height="20" style="padding-top:3px; font-weight:bold; font-style:italic;">4x3<br><input type="radio" name="page2" title="4 by 3" value="4x3" style="display:none;"></td></tr></table>
</div>
アップデート：
だから私はjQueryを調べていて、こちらの投稿を見つけました。私はこの機能を試していますが、うまくいくように見えますが、そうではありません。これがより良いルートかどうか教えてください..
$(document).ready(function() {
$('input[type="radio"]').change( function() {
// grab all the radio buttons with the same name as the one just changed
var this_radio_set = $('input[name="'+$(this).attr("page1")+'"]');
// iterate through each
// if checked, set its parent label's class to "selected"
// if not checked, remove the "selected" class from the parent label
// my HTML markup for each button is <label><input type="radio" /> Label Text</label>
// so that this works anywhere even without a unique ID applied to the button and label
for (var i=0; i < this_radio_set.length;i++) {
if ( $(this_radio_set[i]).is(':checked') ) $(this_radio_set[i]).parent('table').addClass('selected');
else $(this_radio_set[i]).parent('table').removeClass('selected');
}
});
});
更新BobS による次の修正で jQuery を更新しました。現在、jQuery を使用して、テーブルをクリックしてラジオを選択し、ラジオがチェックされているときに jquery を使用してスタイルを変更しています。何らかの理由で、これら 2 つの機能を組み合わせるのに問題があるため、テーブルをクリックしてラジオをオンにすると、スタイルも変更されます。これが私の最新のコードです。誰かが私を助けてくれることを願っています:p
// jQuery to select radio button within clicked table
$(function() {
$('table').click(function(event) {
if(event.target.type != "radio") {
var that = $(this).find('input:radio');
that.attr('checked', !that.is(':checked'));
}
});
});
// jQuery to change the style of the table containing the selected radio button
$(function() {
$('input[type="radio"]').change( function() {
// grab all the radio buttons with the same name as the one just changed
var this_radio_set = $('input[name="'+$(this).attr("name")+'"]');
for (var i=0; i < this_radio_set.length;i++) {
if ( $(this_radio_set[i]).is(':checked') )
$(this_radio_set[i]).closest('table').addClass('selected');
else
$(this_radio_set[i]).closest('table').removeClass('selected');
}
});
});