Question

我想通过单击按钮.add动态获得某个div中所有选中的单选按钮的值

<div class="item">

<title class="name">Espresso</title>

**<div class="option1">**

<fieldset>
<legend>Pick </legend>

<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1" 
value="Short">

<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">

<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4" 
value="Small cup">
</fieldset>

 </div>

 <hr>

 <button type="submit" class="add">+Add</button>

 <span class="price" value="4$">Price:<br>5$</span>

 </div>

这是.js函数，应该获取单选按钮的值并将其附加到列表中，但我没有得到任何响应。

$('.add').click (function(){
$(this).siblings("fieldset").children("input[type=radio]:checked")
.each(function () {
        var selectedOptions = $(this).parent().text();
        $(".orderOptions").last().append("<li> +selectedOption+ </li>");
    });
});

整个过程是：.click（从html div获取所有选中的单选按钮的值）并将其保存到列表中。

Answer 1

在点击事件中，您写了：

$(this).siblings("fieldset").children("input[type=radio]:checked")

这是错误的，因为这里的this是对button的引用，而不是要在其中获取输入的div。

所以您必须使用div本身：

$('#call1 fieldset input[type=radio]:checked')

然后，您可以简单地通过this.value获取检查后的值，并将其附加到任何其他div。

$('.add').click (function(){
  $('#call1 fieldset input[type=radio]:checked')
    .each(function () {
   		$('.orderOptions').append("<li>" +this.value+ "</li>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">

  <title class="name">Espresso</title>

  <div id="call1" class="option1">

    <fieldset>
      <legend>Pick </legend>

      <label for="radio-1" >Short</label>
      <input type="radio" name="radio-1" class="radio-1" id="radio-1" 
             value="Short">

      <label for="radio-2">Long</label>
      <input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
      <hr>
      <label for="radio-3">In big cup</label>
      <input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">

      <label for="radio-4">Small cup</label>
      <input type="radio" name="radio-2" class="radio-1" id="radio-4" 
             value="Small cup">
    </fieldset>

  </div>

  <hr>

  <button type="submit" class="add">+Add</button>

  <span class="price" value="4$">Price:<br>5$</span>

</div>

<div class='orderOptions'></div>

Answer 2

如果您要处理与“添加”按钮相关的字段集，则可以使用以下内容：

$('.add').click (function(){
  ...
  $(this).siblings('div').find(':checked')
  ...
});

这有效，因为不是您的<fieldset>而是<div class="option1">是按下按钮的同级按钮。找到其中包含字段集的正确div后，选中的选项的选择器可以简化为:checked，因为它在<div>中进行搜索（“少写多做...”）。

$('.add').click (function(){
  $('.orderOptions').append('<hr><ul>'+
   $(this).siblings('div').find(':checked')
    .map((_,e)=>"<li>"+e.value+"</li>").get().join('')+'</ul>'
  )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">

  <title class="name">Espresso</title>

  <div id="call1" class="option1">

    <fieldset>
      <legend>Pick </legend>

      <label for="radio-1" >Short</label>
      <input type="radio" name="radio-1" class="radio-1" id="radio-1" 
             value="Short">

      <label for="radio-2">Long</label>
      <input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
      <hr>
      <label for="radio-3">In big cup</label>
      <input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">

      <label for="radio-4">Small cup</label>
      <input type="radio" name="radio-2" class="radio-1" id="radio-4" 
             value="Small cup">
    </fieldset>

  </div>

  <hr>

  <button type="submit" class="add">+Add</button>

  <span class="price" value="4$">Price:<br>5$</span>

</div>

<div class='orderOptions'></div>

Answer 3

这正在工作

$(this).parent().children(".option1").children("fieldset").children("input[type='radio']:checked").each(function (index,element) {
    var selectedOptions = $(element).prev("label").text();
    $(".orderOptions").last().append("<li>" +selectedOptions+ "</li>");
});

HTML

<div class="item">

<title class="name">Espresso</title>

**<div class="option1">**

<fieldset>
<legend>Pick </legend>

<label for="radio-1" >Short</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-1" 
value="Short">

<label for="radio-2">Long</label>
<input type="radio" name="radio-1" class="radio-1" id="radio-2" value="Long">
<hr>
<label for="radio-3">In big cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-3" value="In big cup">

<label for="radio-4">Small cup</label>
<input type="radio" name="radio-2" class="radio-1" id="radio-4" 
value="Small cup">
</fieldset>

 </div>

 <hr>

 <button type="submit" class="add">+Add</button>

 <span class="price" value="4$">Price:<br>5$</span>

 </div>
 <ul class="orderOptions">
 </ul>

 </div>

我想通过单击按钮动态获取某个div中所有选中的单选按钮的值

3 个答案: