如何使用 javascript 在不同的文本字段中显示多个输入值
How to show multiple input values in different text fields using javascript
我有多个输入字段作为单选按钮,用户可以在其中 select 一个按钮,然后单选按钮消失,selected 值将显示在新的 div 中
如果 selected 并且能够显示,我成功地获得了单个值,但是如何从多个表单中获取输入并将其显示在dividually 中 div
<div class="chat machine">
<p class="chat-message" id="course-picker">
Which course do you want to choose?
<form method="post">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="co1"value="course 1">
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="co2"value="course 2">
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="co3"value="course 3">
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="co4"value="course 4">
<span class="checkmark">Course 4</span>
</label>
</form>
</p>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result"></span></p>
</div>
<script>
jQuery(':radio').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
</script>
<div class="chat machine">
<p class="chat-message" id="preference">
Which course do you want to choose?
<form method="post">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="p1"value="prefer 1">
<span class="checkmark">prefer 1</span>
</label>
<label class="container">
<input type="radio" name="p2"value="prefer 2">
<span class="checkmark">prefer 2</span>
</label>
</form>
</p>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result1"></span></p>
</div>
<script>
jQuery(':radio').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
</script>
我想过为什么我们需要多种形式。
https://codepen.io/kaslab/pen/vwGZWm
我添加了多个 P 标签 和 class,问题添加无线电命名
HTML :
<div class="chat machine">
<div class="user-photo">
<img src="img/user.png" />
</div>
<form method="post" id="course-picker">
<p class="chat-message questionControl">Which course do you want to choose?
<!--Radio Buttons for getting course input --><br />
<label class="container">
<input type="radio" name="course1" value="course 1" />
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 2" />
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 3" />
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 4" />
<span class="checkmark">Course 4</span>
</label>
</p>
<p class="chat-message questionControl">Which subject do you want to choose?
<!--Radio Buttons for getting subject input --><br />
<label class="container">
<input type="radio" name="subject1" value="subject 1" />
<span class="checkmark">Subject 1</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 2" />
<span class="checkmark">Subject 2</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 3" />
<span class="checkmark">Subject 3</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 4" />
<span class="checkmark">Subject 4</span>
</label>
</p>
<button type="button" class="getResult">Result</button>
</form>
</div>
<div class="chat self" id="self-chat">
<div class="user-photo">
<img src="img/self.png">
</div>
<p class="chat-message">
<span id="result"></span>
</p>
</div>
</div>
脚本:
var $radio = $("input:radio");
var $result = $(".getResult");
$result.on('change, click', function(){
getSelectedRadioValue();
hideRadio();
});
function getSelectedRadioValue(){
var $result = [];
$(".questionControl").each(function() {
var $ans = $(this).find('input:radio:checked').val();
$result.push($ans);
});
$('.chat-message #result').html($result.join(', '));
}
function hideRadio(){
$('input:radio').hide();
// if you wanted to disable
// $('input:radio').attr('disabled', true);
}
请关注link先睹为快
通过做:
jQuery(':radio').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
然后:
jQuery(':radio').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
您将 2 个点击事件处理程序附加到所有单选按钮,无论其形式如何。
我刚刚修改了标记,为每个表单添加了不同的 ID(course-picker-form
和 preference-form
)并更改了选择器('#course-picker-form input[type="radio"]'
和 '#preference-form input[type="radio"]'
)将 2 个单独的点击处理程序附加到它们的预期单选按钮组:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat machine" id="course-picker">
<p class="chat-message">
Which course do you want to choose?
</p>
<form method="post" id="course-picker-form">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="co1"value="course 1" />
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="co2"value="course 2" />
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="co3"value="course 3" />
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="co4"value="course 4" />
<span class="checkmark">Course 4</span>
</label>
</form>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result"></span></p>
</div>
<script>
jQuery('#course-picker-form input[type="radio"]').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
</script>
<div class="chat machine" id="preference">
<p class="chat-message">
Which course do you want to choose?
</p>
<form method="post" id="preference-form">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="p1"value="prefer 1">
<span class="checkmark">prefer 1</span>
</label>
<label class="container">
<input type="radio" name="p2"value="prefer 2">
<span class="checkmark">prefer 2</span>
</label>
</form>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result1"></span></p>
</div>
<script>
jQuery('#preference-form input[type="radio"]').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
</script>
我有多个输入字段作为单选按钮,用户可以在其中 select 一个按钮,然后单选按钮消失,selected 值将显示在新的 div 中
如果 selected 并且能够显示,我成功地获得了单个值,但是如何从多个表单中获取输入并将其显示在dividually 中 div
<div class="chat machine">
<p class="chat-message" id="course-picker">
Which course do you want to choose?
<form method="post">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="co1"value="course 1">
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="co2"value="course 2">
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="co3"value="course 3">
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="co4"value="course 4">
<span class="checkmark">Course 4</span>
</label>
</form>
</p>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result"></span></p>
</div>
<script>
jQuery(':radio').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
</script>
<div class="chat machine">
<p class="chat-message" id="preference">
Which course do you want to choose?
<form method="post">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="p1"value="prefer 1">
<span class="checkmark">prefer 1</span>
</label>
<label class="container">
<input type="radio" name="p2"value="prefer 2">
<span class="checkmark">prefer 2</span>
</label>
</form>
</p>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result1"></span></p>
</div>
<script>
jQuery(':radio').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
</script>
我想过为什么我们需要多种形式。 https://codepen.io/kaslab/pen/vwGZWm
我添加了多个 P 标签 和 class,问题添加无线电命名
HTML :
<div class="chat machine">
<div class="user-photo">
<img src="img/user.png" />
</div>
<form method="post" id="course-picker">
<p class="chat-message questionControl">Which course do you want to choose?
<!--Radio Buttons for getting course input --><br />
<label class="container">
<input type="radio" name="course1" value="course 1" />
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 2" />
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 3" />
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="course1" value="course 4" />
<span class="checkmark">Course 4</span>
</label>
</p>
<p class="chat-message questionControl">Which subject do you want to choose?
<!--Radio Buttons for getting subject input --><br />
<label class="container">
<input type="radio" name="subject1" value="subject 1" />
<span class="checkmark">Subject 1</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 2" />
<span class="checkmark">Subject 2</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 3" />
<span class="checkmark">Subject 3</span>
</label>
<label class="container">
<input type="radio" name="subject1" value="subject 4" />
<span class="checkmark">Subject 4</span>
</label>
</p>
<button type="button" class="getResult">Result</button>
</form>
</div>
<div class="chat self" id="self-chat">
<div class="user-photo">
<img src="img/self.png">
</div>
<p class="chat-message">
<span id="result"></span>
</p>
</div>
</div>
脚本:
var $radio = $("input:radio");
var $result = $(".getResult");
$result.on('change, click', function(){
getSelectedRadioValue();
hideRadio();
});
function getSelectedRadioValue(){
var $result = [];
$(".questionControl").each(function() {
var $ans = $(this).find('input:radio:checked').val();
$result.push($ans);
});
$('.chat-message #result').html($result.join(', '));
}
function hideRadio(){
$('input:radio').hide();
// if you wanted to disable
// $('input:radio').attr('disabled', true);
}
请关注link先睹为快
通过做:
jQuery(':radio').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
然后:
jQuery(':radio').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
您将 2 个点击事件处理程序附加到所有单选按钮,无论其形式如何。
我刚刚修改了标记,为每个表单添加了不同的 ID(course-picker-form
和 preference-form
)并更改了选择器('#course-picker-form input[type="radio"]'
和 '#preference-form input[type="radio"]'
)将 2 个单独的点击处理程序附加到它们的预期单选按钮组:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat machine" id="course-picker">
<p class="chat-message">
Which course do you want to choose?
</p>
<form method="post" id="course-picker-form">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="co1"value="course 1" />
<span class="checkmark">Course 1</span>
</label>
<label class="container">
<input type="radio" name="co2"value="course 2" />
<span class="checkmark">Course 2</span>
</label>
<label class="container">
<input type="radio" name="co3"value="course 3" />
<span class="checkmark">Course 3</span>
</label>
<label class="container">
<input type="radio" name="co4"value="course 4" />
<span class="checkmark">Course 4</span>
</label>
</form>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result"></span></p>
</div>
<script>
jQuery('#course-picker-form input[type="radio"]').click(function () {
$("#result").text(this.value);
$("#course-picker").hide();
});
</script>
<div class="chat machine" id="preference">
<p class="chat-message">
Which course do you want to choose?
</p>
<form method="post" id="preference-form">
<!--Radio Buttons for getting course input -->
<label class="container">
<input type="radio" name="p1"value="prefer 1">
<span class="checkmark">prefer 1</span>
</label>
<label class="container">
<input type="radio" name="p2"value="prefer 2">
<span class="checkmark">prefer 2</span>
</label>
</form>
</div>
<div class="chat self" id="self-chat">
<p class="chat-message"><span id="result1"></span></p>
</div>
<script>
jQuery('#preference-form input[type="radio"]').click(function () {
$("#result1").text(this.value);
$("#preference").hide();
});
</script>