其他文本框

-1

我有一個具有多組單選按鈕的窗體。當我選擇一個單選按鈕時，它會在同一頁面上輸出。其他文本框

我想爲Other添加一個單選按鈕。當選擇Other時，應該顯示文本框，以便用戶可以輸入文本。

文本框中的用戶輸入將以相同的順序顯示。


 
$(document).ready(function() { 
 
    $("input").click(function() { 
 
     $("#result").html(function() { 
 
      var str = ''; 
 
      $(":checked").each(function() { 
 
       str += $(this).val()+ " "; 
 
      }); 
 
      return str; 
 
     }); 
 
    }); 
 
});

<table width="100%"> 
 
        <tr> 
 
\t \t \t \t \t  <td><input type="radio" name="RadioGroup1" id="a1" value="Accomplished" /><label for="accomplished">Accomplished</label></td> 
 
         <td><input type="radio" name="RadioGroup1" id="a2" value="Exciting" /><label for="exciting">Exciting</label></td> 
 
         <td><input type="radio" name="RadioGroup1" id="a3" value="Dynamic" /><label for="dynamic">Dynamic</label></td> 
 
         <td><input type="radio" name="RadioGroup1" id="a4" value="Holistic" /><label for="holistic">Holistic</label></td> 
 
         <td><input type="radio" name="RadioGroup1" id="a5" value="Animated" /><label for="animated">Animated</label></td> 
 
\t \t \t \t \t </tr> 
 
    </table> 
 

 
<table width="100%"> 
 
        <tr> 
 
\t \t \t \t \t  <td><input type="radio" name="RadioGroup2" id="b1" value="CEO" /><label for="ceo">CEO</label></td> 
 
         <td><input type="radio" name="RadioGroup2" id="b2" value="Account Manager" /><label for="a-manager">Account Manager</label></td> 
 
         <td><input type="radio" name="RadioGroup2" id="b3" value="Customer Service" /><label for="c-services">Customer Service</label></td> 
 
         <td><input type="radio" name="RadioGroup2" id="b4" value="Project Manager" /><label for="p-manager">Project Manager</label></td> 
 
\t \t \t \t \t </tr></table>

$("input").click(function() { 
    $("#result").html(function() { 
     var str = ''; 
     $(":checked").each(function() { 
      str += $(this).val()+ " "; 
     }); 
     return str; 
    }); 
}); 
});

來源

2016-11-19 Amina Malik

你的意思是你想添加一些更多的單選按鈕..並點擊它，你想實現你所提到的？ – RohitS

你能詳細說明你想要的是什麼 – ScanQR

你可以添加標記和更清楚地解釋...這將有助於我們幫助您 – Geeky

您可以在其他<td>添加一個<input type="text">每當用戶選擇其他<radio>按鈕將其可見。我已經完成了使用CSS。爲此，我在HTML中進行了更改：將other類添加到<td>。

td.other div.text{ 
    display: none; 
} 

td.other input[type=radio]:checked+label + div.text{ 
    display:block; 
}

每當用戶選擇「其它」時，它示出了<input type="text">輸入新的值。用戶可以在用戶按下鍵的同時實時查看結果。

下面是摘錄：

console.clear(); 
 

 
function inputSelected() { 
 
    $("#result").html(function() { 
 
    var str = ''; 
 
    $(":checked").each(function() { 
 
     str += $(this).val() + " "; 
 
    }); 
 
    return str; 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $("input[type=radio]").click(inputSelected); 
 

 
    $("td.other").click(function() { 
 
    $(this).find('input[type=text]').focus(); 
 
    }); 
 

 
    $("td.other input[type=text]").keyup(function(e) { 
 
    var value = $(this).val().trim(); 
 

 
    if (value.length <= 0) { 
 
     value = 'Other'; 
 
    } 
 

 

 
    $(this).parent().siblings("input[type=radio]").val(value); 
 
    $(this).parent().siblings("label").html(value); 
 

 
    inputSelected(); 
 

 
    }) 
 
}); 
 

 
//$(".other label").click();

td.other div.text { 
 
    display: none; 
 
} 
 
td.other input[type=radio]:checked+label + div.text { 
 
    display: block; 
 
} 
 
td.other input[type=radio]:checked+label { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="description" content="Jquery: Add new radio field for selection"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <table width="100%"> 
 
    <tr> 
 
     <td> 
 
     <input type="radio" name="RadioGroup1" id="a1" value="Accomplished" /> 
 
     <label for="a1">Accomplished</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup1" id="a2" value="Exciting" /> 
 
     <label for="a2">Exciting</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup1" id="a3" value="Dynamic" /> 
 
     <label for="a3">Dynamic</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup1" id="a4" value="Holistic" /> 
 
     <label for="a4">Holistic</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup1" id="a5" value="Animated" /> 
 
     <label for="a5">Animated</label> 
 
     </td> 
 
     <td class="other"> 
 
     <input type="radio" name="RadioGroup1" id="a6" value="Other" /> 
 
     <label for="a6">Other</label> 
 
     <div class="text"> 
 
      <input type="text" id="other1" value="Other"> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <table width="100%"> 
 
    <tr> 
 
     <td> 
 
     <input type="radio" name="RadioGroup2" id="b1" value="CEO" /> 
 
     <label for="b1">CEO</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup2" id="b2" value="Account Manager" /> 
 
     <label for="b2">Account Manager</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup2" id="b3" value="Customer Service" /> 
 
     <label for="b3">Customer Service</label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="RadioGroup2" id="b4" value="Project Manager" /> 
 
     <label for="b4">Project Manager</label> 
 
     </td> 
 
     <td class="other"> 
 
     <input type="radio" name="RadioGroup2" id="b5" value="Other"> 
 
     <label for="b5">Other</label> 
 
     </input> 
 
     <div class="text"> 
 
      <input type="text" id="other2" value="Other"> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <div id="result"> 
 
    </div> 
 
</body> 
 

 
</html>

在這個片段中，我已經在<label>更新for來引用<radio>。

來源

2016-11-19 18:38:06 sam

這個答案是相當不錯的，但我正在尋找一個腳本，即時顯示文本無論我在其他單選按鈕上鍵入...意思就像我選擇一個完成的單選按鈕，它顯示在下面完成....同樣，當我輸入其他選項的任何東西時，它應該顯示而不按輸入。希望你能幫助我得到這樣的輸入確切的腳本:) –

@AminaMalik是的，可以實現。那麼，你是否也想爲你的新選項添加一個新的單選按鈕？或者，您是否想將「其他」修改爲新選項？ – sam

我想修改'other'into新的選項，將提交與單選按鈕一樣的輸入詳細信息，就像其他選項的收音機一樣。 –

回答

相關問題