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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

1回答

6005閲覧

GridViewで複数行が存在する場合、1行目以外のラジオボタンを入力しても1行目に反映されてします。

yyflex

総合スコア8

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

0クリップ

投稿2018/09/13 02:34

編集2018/09/13 06:17

asp.net(VB)で質問があります。
諸事情により、GridViewでラジオボタンを使い、入力をしたいと思っております。
Webで気に入ったラジオボタンのデザイン(css)を見つけ、自分なりに編集してみたのですが、
GridViewに複数レコードが存在する場合、ラジオボタンを編集すると、2行目以降の
ラジオボタンの選択項目を選択しても、1行目に反映がされてしまいます。
解決方法などありましたら、教えていただければ幸いです。
(1行目で"出勤"が選択された状態で、2行目以降の"遅刻","出張"..exをClickしても、
1行目の"遅刻","出張"..exが選択状態になります。)

ソース(asp.net):

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ユーザID" DataSourceID="odsUserList"> <Columns> <asp:BoundField DataField="ユーザID" HeaderText="ユーザID" ReadOnly="True" SortExpression="ユーザID" /> <asp:BoundField DataField="氏名" HeaderText="氏名" ReadOnly="True" SortExpression="氏名" /> <asp:TemplateField AccessibleHeaderText="状態"> <ItemTemplate> <div class="RDO"> <input name="s3" id="select1" value="1" type="radio"> <label for="select1">出勤</label> <input name="s3" id="select2" value="2" type="radio"> <label for="select2">遅刻</label> <input name="s3" id="select3" value="3" type="radio"> <label for="select3">出張</label> <input name="s3" id="select4" value="4" type="radio"> <label for="select4">有給</label> <input name="s3" id="select5" value="5" type="radio"> <label for="select5">欠勤</label> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

css:

.RDO input{ display: none; } .RDO label{ display: block; float: left; cursor: pointer; width: 80px; margin: 0; padding: 12px 5px; border-right: 1px solid #abb2b7; background: #bdc3c7; color: #555e64; font-size: 14px; text-align: center; line-height: 1; transition: .2s; } .RDO label:first-of-type{ border-radius: 3px 0 0 3px; } .RDO label:last-of-type{ border-right: 0px; border-radius: 0 3px 3px 0; } .RDO input[type="radio"]:checked + label { background-color: #a1b91d; color: #fff; }

環境
OS:Windows7
Visual Studio:2010
.net Framework:4.7.03056
SQL Server:2017

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/09/13 02:52

ソースは ``` と ``` で囲ってください。インデントされて見やすくなりますので。(他人に見てもらえる努力をしましょう)
退会済みユーザー

退会済みユーザー

2018/09/13 02:53

あと、開発環境(OS, .NET Visual Studio のバージョンなど)を書いてください。特に .NET のバージョンが重要です。
x_x

2018/09/13 03:07

「2行目の ラジオボタンを変更」というのは具体的にどのように実現しようとしましたか?
退会済みユーザー

退会済みユーザー

2018/09/13 06:45

VS2010 では .NET 4.0 までしか使えないはずですが。4.0 と言うことで良いのですか?
退会済みユーザー

退会済みユーザー

2018/09/13 06:55

ラジオボタンということなので、各行に 5 つずつあるボタンを一つのグループとして、グループの中では一つのボタンしか選択できない、各グループは独立して動く(一行目と二行目のグループは独立して動く) と理解してましたが、違うのですか?
退会済みユーザー

退会済みユーザー

2018/09/13 06:58

あと、ひとつお願いですが、質問の本文をコメントもに応じて変更した際は、質問者さんもコメント欄にその旨書いてください。
yyflex

2018/09/18 00:20

ご指摘、誠にありがとうございます。また、失礼いたしました。以降、質問の際は気を付けさせていただきます。
yyflex

2018/09/18 00:40

また、ラジオボタンの件は仰る通りです。.netのバージョンの件はヘルプのバージョン情報に書いてあるものをそのまま、記述してしまいました。失礼いたしました。今後のためにも勉強しておきます。
guest

回答1

0

ベストアンサー

上の質問への私のコメント、

ラジオボタンということなので、各行に 5 つずつあるボタンを一つのグループとして、グループの中では一つのボタンしか選択できない、各グループは独立して動く(一行目と二行目のグループは独立して動く)

・・・のようにしたいのだと理解してレスしておきます。

html の input type-"radio" を複数使うのではなく、RadioButtonList コントロールを使ってはいかがですか?

具定例は以下の通りです。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="0052-RadioButtonListInGridView.aspx.cs" Inherits="_0052_RadioButtonListInGridView" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" SelectCommand="SELECT EmployeeID, FirstName + ' ' + LastName AS FullName FROM Employees" > </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="ユーザー ID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /> <asp:BoundField DataField="FullName" HeaderText="氏名" ReadOnly="True" SortExpression="FullName" /> <asp:TemplateField HeaderText="状態"> <ItemTemplate> <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Selected="True" Value="1">出勤</asp:ListItem> <asp:ListItem Value="2">遅刻</asp:ListItem> <asp:ListItem Value="3">有給</asp:ListItem> <asp:ListItem Value="4">出張</asp:ListItem> <asp:ListItem Value="5">欠勤</asp:ListItem> </asp:RadioButtonList> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>

そうすれば、上記 RadioButtonList からレンダリングされる input type="radio" の name 属性は行のグループの中では同じ、行の違う別のグループでは異なるように ASP.NET が自動的に設定してくれます。

以下の画像がその結果です。

イメージ説明

たぶん、この後ポストバックするなりして選択結果をサーバー側で取得して処置することを考えていると思いますが、その場合 RadioButtonList を使うのメリットが出てくるはずです。

質問者さんのやりたいことが上記とは異なる場合が、どこがどのように違うのか具体的に書いくれればまた考えて回答します。

ただし今日は時間が無いので、回答は明日以降になります。

投稿2018/09/13 08:19

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yyflex

2018/09/18 00:29

返信が遅くなり申し訳ありません。 その後ですが、原因がわかりました。 GridViewがHtmlになると、Nameプロパティが全行同じまま、展開(?)され、同じグループになるため、 質問の現象が発生していたようです。 そのため、RowDataBoundイベントでNameプロパティを変えれば良いとは思ったのですが、SurferOnWwwさんの仰ったRadioButtonListコントロールの方が便利そうなので、 RadioButtonListコントロールを利用させていただこうかと思います。 いろいろと失礼な点があり、申し訳ありませんでした。 今後は気をつけさせていただく所存でございます。 ありがとうございました。
退会済みユーザー

退会済みユーザー

2018/09/18 01:48

> GridViewがHtmlになると、Nameプロパティが全行同じまま、展開(?)され、同じグループになるため、 質問の現象が発生していたようです。 そこのところ誤解があるのではないかと思います。 質問者さんのコードで言うと ItemTemplate の中の <div class="RDO"> ... </div> というコードはただの文字列としてそのままリテラルコントロールに取り込まれ、ASP.NET が html ソースをレンダリングする際リテラルコントロールの中身はそのまま一字一句違わないように出力するから、GridView の全行で全く同じになるということです。 runat="server" 要素を付与してサーバーコントロールにすると話は違ってくるはずです。決してお勧めではありませんが・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問