獲取帶有單選按鈕單擊文本框的文本框

我正在用一些單選按鈕編碼頁面，並遇到一些問題。這是我電流輸出獲取帶有單選按鈕單擊文本框的文本框

enter image description here

下面是我的代碼

<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <style> 
     #sitehtn { 
      display: none 
     } 

     .container { 
      width: 100%; 
      height: 600px; 
      background-color: rgb(179, 174, 174); 
     } 
     #datepickerT { 
      margin-left: 2em; 
     } 
     .eventDateDiv { 
      height: 150px; 
      width: 30%; 
      margin-left: auto; 
      margin-right: auto; 
     } 
     #daysBetween { 
      margin-top: -1.4em; 
      margin-left: 30%; 
     } 
     .eventShowDiv { 
      height: 250px; 
      width: 30%; 
      margin-left: auto; 
      margin-right: auto; 
     } 
     .event { 
      color: green; 
      margin-top: 5px; 
     } 
    </style> 
    <script> 
     $(function() { 
      $("#datepickerF").datepicker({ 
         showOn : "button", 
       buttonImage : "calendar.gif", 
      buttonImageOnly : true 
      }); 

      $("#datepickerT").datepicker({ 
         showOn : "button", 
       buttonImage : "calendar.gif", 
      buttonImageOnly : true 
      }); 

      $('#getdays').click(function() { 
       var start = $('#datepickerF').datepicker('getDate'); 
       var end = $('#datepickerT').datepicker('getDate'); 
       var days = (end - start)/1000/60/60/24; 
       document.getElementById("daysBetween").innerText=days; 
      }); 

      $('input[type=radio]').change(function() { 
       $('#sitehtn').hide() 
       $(this).parent().next().show() 
      }); 

      function displayResult(browser) { 
       document.getElementById("result").value=browser 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="eventDateDiv"> 
      <div class="event"> 
       EVENT DATE 
      </div> 
      <p>FROM: <input type="text" id="datepickerF" /></p> 
      <p>To: <input type="text" id="datepickerT" /></p> 
      <button id="getdays">NO.OF DAYS </button> 
      <p id="daysBetween"> </p> 
     </div> 
     <div class="eventShowDiv"> 
      <div class="event"> 
       EVENT SHOW TIME 
      </div> 
      <p>TYPE OF SHOW: </p> 
      <label> 
       <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" /> 
       Unique 
      </label> 
      <input type="text" name="site" id="sitehtn" /> 
      <br /> 
      <label> 
       <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" /> 
       Varied 
      </label> 
      <input type="text" name="textfield3" id="sitehtn" /> 
     </div> 
    </div> 
</body> 
</html>

我的實際期望的輸出是。

當我點擊獨特的單選按鈕，一個文本框將出現，並自動下單選按鈕（變化）將隱藏
文本框include..Four文本字段中it..two的田野上從和 TO日期選擇器和內容佔位符，和最後一個按鈕，同樣的4個字段添加到下一行的同一文本框內

正如我在這個新的領域，我需要你支持和寶貴的意見來解決這個問題。

來源

2013-11-09 Manu

做一個小提琴.. – Hiral

HTML部分在哪裏？ –

@SunilKumar：對不起，我重新編輯我的代碼..檢查它 – Manu

對於你的第一個問題試試這個。

$('#courtierRadio').on('change', function() { 
    $('#sitehtn').show(); 
    $('#agenceRadio').hide(); 
});

來源

2013-11-09 08:27:27 Praveen

感謝您的代碼它的工作原理，但我還有一個dobut在下面的代碼中做了什麼變化來顯示我的第一個單選按鈕旁邊的所有我的textfiels現在itz只顯示一個文本框..如果我添加更多它不顯示 – Manu

$（'輸入[type = radio]'）。change（function（）{ $（'＃sitehtn'）。hide（） $（this）.parent（）。next（）。show（） }）; //這是馬碼 – Manu

這可能與日期選擇器一起使用。你必須添加內容的持有者和文本框。

<head> 
     <meta charset="utf-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <style> 
      #sitehtn { 
       display: none 
      } 

      .container { 
       width: 100%; 
       height: 600px; 
       background-color: rgb(179, 174, 174); 
      } 
      #datepickerT { 
       margin-left: 2em; 
      } 
      .eventDateDiv { 
       height: 150px; 
       width: 400px; 
       margin-left: 0; 
       margin-right: auto; 
      } 
      #daysBetween { 
       margin-top: -1.4em; 
       margin-left: 30%; 
      } 
      .eventShowDiv { 
       height: 250px; 
       width: 30%; 
       margin-left: auto; 
       margin-right: auto; 
      } 
      .event { 
       color: green; 
       margin-top: 5px; 
      } 
     </style> 
     <script> 
     function loading() { 
       $(".datepickerF").datepicker({ 
          showOn : "button", 
        buttonImage : "calendar.gif", 
       buttonImageOnly : true 
       }); 

       $(".datepickerT").datepicker({ 
          showOn : "button", 
        buttonImage : "calendar.gif", 
       buttonImageOnly : true 
       }); 

       $('.getdays').click(function() { 
        var start = $(this).prev().prev().find('input').datepicker('getDate'); 
        var end = $(this).prev().find('input').datepicker('getDate'); 
        var days = (end - start)/1000/60/60/24; 
        $(this).next().text(days); 
       }); 

       $('input[id=courtierRadio]').change(function() { 
        $('#hideRadio').html(""); 
        $('#hideRadio').append(getAppleInfo()); 
       }); 
       function displayResult(browser) { 
        document.getElementById("result").value=browser 
       } 
      }; 
      window.onload = loading; 

     // anti-pattern! keep reading... 
     function getAppleInfo() { 
      var eventDateDiv =""; 
      eventDateDiv = $("<div></div>").addClass("eventDateDiv"); 
      eventDateDiv.append($("<p></p>").text("FROM: ").append($("<input>").attr("class", "datepickerF").attr("type", "text"))); 
      eventDateDiv.append($("<p></p>").text("TO: ").append($("<input>").attr("class", "datepickerT").attr("type", "text"))); 
      eventDateDiv.append($("<button></button>").text("NO.OF DAYS ").attr("class", "getdays")); 
      eventDateDiv.append($("<p></p>").attr("class", "daysBetween")); 
      eventDateDiv.append($("<a>").text("Add Another").attr("href", "#").attr("onclick", "belowDiv(this)")); 
      return eventDateDiv; 

     } 
     function belowDiv(self){ 
      $('#hideRadio').append(getAppleInfo()); 
      loading(); 
     } 
     </script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="eventDateDiv" title="numb"> 
       <div class="event"> 
        EVENT DATE 
       </div> 
       <p>FROM: <input type="text" class="datepickerF" /></p> 
       <p>To: <input type="text" class="datepickerT" /></p> 
       <button class="getdays">NO.OF DAYS </button> 
       <p class="daysBetween"> </p> 
      </div> 
      <div class="eventShowDiv" title="dumb"> 
       <div class="event"> 
        EVENT SHOW TIME 
       </div> 
       <p>TYPE OF SHOW: </p> 
       <label> 
        <input type="radio" name="sitewebGroup" value="Courtier" id="courtierRadio" /> 
        Unique 
       </label> 
       <input type="text" name="site" /> 
       <br /> 
       <div id="hideRadio"> 
       <label> 
        <input type="radio" name="sitewebGroup" value="Agence" id="agenceRadio" /> 
        Varied 
       </label> 
       <input type="text" name="textfield3" /> 
       </div> 
      </div> 
     </div> 
    </body> 
    </html>

來源

2013-11-09 23:29:25 user2975123

獲取帶有單選按鈕單擊文本框的文本框

回答

相關問題