Java jQueryのnameとidを切り替える方法

このQ&Aのポイント
  • jQueryを使用してラジオボタンのcssを切り替えるプログラムで、name属性を使用しています。
  • しかし、name属性はPHPでも使用しているため、JavaScriptとは切り離したい場合があります。
  • 代替としてid属性を使用することで、同様の機能を実現することができます。
回答を見る
  • ベストアンサー

java jqueryのnameとid

ラジオボタンでcssを切り替える以下のようなプログラムがあるのですが、 $(function(){ entryChange1(); entryChange2(); entryChange3(); entryChange4(); entryChange5(); }); $(window).load(function entryChange1() { radio = document.getElementsByName('name1'); if(radio[1].checked) { $('.a,.b').show(); $('.c').css('width','585px'); }else if(radio[0].checked){ $('.a,.b').hide(); $('.c').css('width','270px'); } }); function entryChange1(){ $("input[name='name1'][value='0']").click(function() { $('.a,.b').show(); $('.c').css('width','585px'); }); $("input[name='name1'][value='1']").click(function() { $('a,.b').hide(); $('.c').css('width','270px'); }); } //entryChange2~5();は省略 ここで使っているnameはphpの方でも扱っているパラメータなのでjavascriptとは切り離したいのですが、idで代替はできますか? なにか方法があれば教えていただければありがたいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

なにをされたいのか、ご提示のコード部だけではよくわかりませんが、 別にname属性をいっさい使わない選択の方法もありますけど、 根本的にもっとすっきりできそうな機がします。 イベント発生時にターゲットノードから、親や子供 兄弟を特定すれば、やたらと識別子をつけなくてもよいような。 まずは、 document.getElementById(id)   =>Node document.getElementsByName(name) =>NodeList getElementsByTagName(name)    =>NodeList といった基本どころから学習して、 form要素だろうから、HTMLインターフェースの document.forms[].elements[] みたいな選び方も知った上で、 CSSセレクターの書き方やjquery独自のセレクターもマスターしよう。 そしてXPATHも...

errorman
質問者

お礼

そんなに勉強項目が… 地道にやってみます。 ありがとうございました

関連するQ&A

  • jQueryで複数のラジオボタンを処理

    jQueryを最近使い始めました。 以下のようなことをしたいのですが、いいやり方が分かりません。 jQueryを使ってページの読み込み後すぐに、ラジオボタンにチェックを入れたいと思っています。 以下のようにすると実際にチェックが入りました。 HTML <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> jQuery if(!$("input:radio[name=a]:checked").val()){  $("input:radio[name=a]:first").attr("checked" , "checked"); } ラジオボタンが複数ある場合、上記のjQueryのnameの値を変えたものを増やしていけば対応できたのですが、ラジオボタンがたくさんある場合、同じようなスクリプトが何行も増えてしまいます。 うまく関数にする方法やその他よい対処法はないでしょうか。 <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> <input type="radio" name="b" value="1" /> <input type="radio" name="b" value="2" /> <input type="radio" name="c" value="1" /> <input type="radio" name="c" value="2" /> … if(!$("input:radio[name=a]:checked").val()){  $("input:radio[name=a]:first").attr("checked" , "checked"); } if(!$("input:radio[name=b]:checked").val()){  $("input:radio[name=b]:first").attr("checked" , "checked"); } if(!$("input:radio[name=c]:checked").val()){  $("input:radio[name=c]:first").attr("checked" , "checked"); } …

  • jQueryのclick(function()が動かない・・・?

    お世話になります。 JS初心者ですが、jQueryに手を出し勉強しているものです。 勉強の過程で登録フォームを作成しているのですが、 1. 登録フォーム1 2. 登録フォーム2 3. 確認画面 4. 完了画面 という流れになるようにPHP+jQueryでフォームを作成しています。 1と2の間で入力エラーがあった場合には、1のフォーム上に赤文字でエラー内容が表示。 2と3の間で入力エラーがあった場合には2のフォーム上でエラー表示。 としています。 更に1のフォーム上では、jQueryを使いフォームの一部をラジオボックスと 連動し表示・非表示が出来るようにしています。 そこで質問の内容なのですが、以下のコードで書くと、 1と2の間でエラーがあり、1のフォームに戻ってきた際に ラジオボックスで「表示する」を選択していて、 値もちゃんと「表示する」となっているのに、表示したい部分が 非表示になってしまいます。 PHPでのエラー処理で値はちゃんと持ってきていることは確認しましたが、、、 宜しくお願いします。 ---- ↓jQuery部分ソース --------------------------------------------- <script type="text/javascript">  $(function(){ $("#haiso").hide(); $("#show").click(function(){ $("#haiso").show(500); }); $("#hide").click(function(){ $("#haiso").hide(500); }); $("#haiso").hide(500); }); </script> --------------------------------------------------------------------- ---- ↓HTML部分ソース -----------------------------------------------   <table>    <tr>     <td>表示選択</td>     <td>         <!-- 表示選択エラー処理 -->     <? if ($_POST['samecheck'] == 1){  echo '<label for="hide">非表示</label>     <input type="radio" name="samecheck" value="1" checked="checked" id="hide">     <label for="show">非表示</label>     <input type="radio" name="samecheck" value="2" id="show"></td></tr>'; } elseif ($_POST['samecheck'] == 2) {  echo '<label for="hide">非表示</label>     <input type="radio" name="samecheck" value="1" id="hide">     <label for="show">非表示</label>     <input type="radio" name="samecheck" value="2" checked="checked" id="show"></td></tr>'; } else {     echo '<label for="hide">非表示</label>     <input type="radio" name="samecheck" value="1" checked="checked" id="hide">     <label for="show">非表示</label>     <input type="radio" name="samecheck" value="2" id="show"></td></tr>'; }     ?>        </td>    </tr>   </table>       <div id="haiso">    <table>    </table>   </div> ---------------------------------------------------------------------

  • jQueryでshow/hideが上手く行かない

    入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。 入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。 <div id="input"><input type="text" name="something"></div> <input type="button" id="button" value="hide"> 以下のようにjQueryを組んでみました。 $(document).ready(function(){ if($("#button").attr("value") == "hide"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().hide(), $("#button").attr("value", "show"); }); } else if($("#button").attr("value") == "show"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().show(), $("#button").attr("value", "hide"); }); } }); まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。 次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。 elseのalertまで行っているのにその後が機能しないのは何故でしょうか?

  • Formのラジオボタンリセット方法

    下記のradioボタンのグループr1、r2、r3、r4のうちグループr1とr2だけを同時にリセットする方法はありますか? グループ1つリセットする方法はわかりますが、2つリセットになると方法が分かりません。 良い方法はありませんか?よろしくお願いします。 <form> <p> <input type="radio" name="r1" value="1" checked>1<br> <input type="radio" name="r1" value="2">2<br> <input type="radio" name="r1" value="3">3 </p> <p> <input type="radio" name="r2" value="a" checked>a<br> <input type="radio" name="r2" value="b">b<br> <input type="radio" name="r2" value="c">c </p> <p> <input type="radio" name="r3" value="a" checked>a<br> <input type="radio" name="r3" value="b">b<br> <input type="radio" name="r3" value="c">c </p> <p> <input type="radio" name="r4" value="a" checked>a<br> <input type="radio" name="r4" value="b">b<br> <input type="radio" name="r4" value="c">c </p> </form>

  • jsを使って2つのラジオボタンでブロック要素の出し入れをしたいのですが

    jsを使って2つのラジオボタンでブロック要素の出し入れをしたいのですが、 IE7でだけチェックした結果が逆になってしまいます。 考えられる原因はなんでしょうか? よろしくお願いいたします。 function entryChange1(){ radio = document.getElementsByName('coursetimetype1'); if(radio[0].checked) { $('#c1').css('display','none'); $('.c_void').css('display','none'); $('.c_master').css('width','262px'); }else if(radio[1].checked){ $('#c1').css('display','block'); $('.c_void').css('display','block'); $('.c_master').css('width','585px'); }

  • JSP(ラジオボタンでチェックされた値を代入)

    JSPのHTML箇所で以下のようなラジオボタンを作成しました。 <input type="radio" name="a" value="1" checked> <input type="radio" name="b" value="2"> 上のラジオボタンが選択されたとき、<% %>のJAVAで変数cに1をセット、 下のラジオボタンが選択されたとき、変数cに2をセットという形を作りたいのですが、 調べてもわかりませんでしたのでご教示ください。 以下のようにするとどちらもソースを通るので、必ず2が代入されてしまいます。 IF文的にどちらかチェックされたほうを代入できるようにしたいです。 <input type="radio" name="a" value="1" checked <% c=1 %>> <input type="radio" name="b" value="2" <% c=2 %>>

    • ベストアンサー
    • Java
  • 複数のラジオボタンのチェック

    複数のラジオボタンが全て選択されているかどうかのチェックのJavaScriptをすっきりした形で書くのは、どうしたらいいでしょうか? 下記のようですと、ダラダラと記述するようになってしまいます。 どなたかご教授ください。 --------------------------------------- <script type="text/javascript"> function insert_onClick() { j=0; for (i=0 ;i < document.F1.a11.length ; i++){ if (document.F1.a11[i].checked) { j=1; } } } </script> <form action="check.php" name="F1" onsubmit="return insert_onClick()"> 各valueは0~4まであります <input type="radio" name="a11" value="0"> <input type="radio" name="a12" value="0"> <input type="radio" name="a21" value="0"> <input type="radio" name="a22" value="0"> <input type="radio" name="b11" value="0"> <input type="radio" name="b12" value="0"> <input type="radio" name="b21" value="0"> <input type="radio" name="b22" value="0"> ---------------------------------------

  • jquery、javascriptについて

    あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 (チェックボックスにチェックを入れるとdiv内の色が変わります。) つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか? さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか? 具体的に教えていただけると幸いです。 よろしくお願いいたします。

  • jQuery 変数の使い方について

    jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか? よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • クリックしたラジオボタンの行番号を取得したい

    Jqueryを用いてクリックしたラジオボタンの行番号を取得したいのですが、 うまくいきません。 次のようなHTMLで <table border="1" style="font-size:12px;"> <tr> <td>2014年06月01日</td> <td> <label><input type="radio" name="rd1" class="rd" value="0" />A</label> <label><input type="radio" name="rd1" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd1" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月02日</td> <td> <label><input type="radio" name="rd2" class="rd" value="0" />A</label> <label><input type="radio" name="rd2" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd2" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月03日</td> <td> <label><input type="radio" name="rd3" class="rd" value="0" />A</label> <label><input type="radio" name="rd3" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd3" class="rd" value="7" />C</label> </td> </tr> <tr> <td>2014年06月04日<td> <td> <label><input type="radio" name="rd4" class="rd" value="0" />A</label> <label><input type="radio" name="rd4" class="rd" value="1" checked="checked" />B</label> <label><input type="radio" name="rd4" class="rd" value="7" />C</label> </td> </tr> </table> 下記で選択したラジオボタンの値を取得できるのですが、 行の番号が取れません。 //ラジオボタンを変更 $('.rd').change(function(){ val = $(this).val(); alert("hoge " + val); }); どのようにしたら良いでしょうか? 宜しくお願いいたします。

専門家に質問してみよう