显示复选框中的所有选定项目

Question

我使用this codepen 作为基础。

HTML

<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>

jQuery

$("input").on("click", function() {
  $("#log").html($("input:checked").val() + "");
});

我已将单选按钮更改为复选框 - 但我想更改 js 以便每个选定的项目都显示在列表的底部，而不仅仅是第一个。

目的是进行自我意识练习 - 即用户可以从一长串列表中选择适用于他们的所有陈述，然后他们得到一个输出，将其缩小到他们选择的那些。表单响应不需要在任何地方保存/提交。

如何做到这一点？

Answer 1

你需要做一些改变

• 如果希望能够选择多个单选按钮，请保持名称不同或使用复选框。

• 维护属性wasChecked 以切换选中的属性。

• 您需要迭代选中的复选框，然后获取它们的值。

演示

$("input").on("click", function(e) {
  var val = [];
  var wasChecked = $(this).attr( "wasChecked" ) == "true";
  if ( wasChecked )
  {
     $(this).prop( "checked", false );
  }
  else
  {
     $(this).prop( "checked", true );
  }
  $(this).attr( "wasChecked", $(this).prop( "checked") );
  $("input:checked").each( function(){
     val.push( $(this).val() );
  });
  $("#log").html( val.join( "," ));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="radio" name="fruit1" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit2" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit3" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>

Answer 2

很多像.val()这样的jQuery函数被设计为对单个元素进行操作，即$("input#first-name").val()，因此如果有多个匹配项，则只返回第一个匹配的元素的值。

您可能需要一个循环来为每个元素提取一个值。幸运的是，jQuery 也提供了一个函数来做到这一点。

$( "input" ).on( "click", function() {

    var html = "";
    $( "input:checked" ).each(function() {
         // "this" in this context is the jQuery element in this position in the list
         html += $(this).val() + "";
    }
    $( "#log" ).html(html);

});

Answer 3

现在你有了一个数组。所以，也许你需要这样的东西？

$( "input" ).on( "click", function() {
  var selectedItems = $( "input:checked" );
  var results = "";
  for(var i = 0; i < selectedItems.length; i++){
    if(i > 0) results += ", ";
    results += selectedItems[i].value;
  }
  $( "#log" ).html( results );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>

Answer 4

$( ":checkbox" ).on('change',function(){
    var li_id = 'li_'+$(this).attr('id');
  if(this.checked){
     $('#list').append("<li id="+li_id+">"+$(this).val()+"</li>") 
  }else{
     $('#'+li_id).remove();
  }
})

<div>
<input type="checkbox" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="checkbox" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="log"></div>
</form>

<ul id='list'>
</ul>

这只是一个简单的示例，用于在列表中添加和删除项目（无论是否选中）。至少它可以让您了解如何实现它。

Answer 5

$( "input" ).on( "click", function(e) {
 if(e.currentTarget.checked){
  var div = document.createElement("p");
  div.id=e.target.value+"1";
   div.innerHTML=e.target.value;
  var tar=document.getElementById("log");
  tar.appendChild(div);
} else {
  var tag = document.getElementById(e.target.value+"1");
  tag.parentNode.removeChild(tag);

 }  
});

你可以试试这个。 现在当你点击橙色时显示和取消选中。

Answer 6

普通 JavaScript解决方案：

只有一个循环：

var form = document.getElementById("myForm"),
  checkboxes = form.querySelectorAll("input[type=checkbox]"),
  checked = document.getElementById("checked"),
  res = new Array(checkboxes.length);

function checkChecked() {
  [].forEach.call(checkboxes, (checkbox, i) => {
    checkbox.addEventListener("change", function() {
      checkbox.checked ? res[i] = checkbox.value : res[i] = "";
      checked.innerHTML = res.join(",").replace(/(^[,]+)|([,]+$)/g, "").replace(/(,){2,}/g, ",");
    })
  })
}

checkChecked();

<form id="myForm">
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="peach" id="orange">
    <label for="orange">peach</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>
<div id="checked"></div>

有两个循环：

var form = document.getElementById("myForm"),
  checkboxes = form.querySelectorAll("input[type=checkbox]"),
  checked = document.getElementById("checked");

function getResult() {
  var res = "";
  [].forEach.call(checkboxes, checkbox => {
    checkbox.checked ? res += checkbox.value + "," : false
  })
  res = res.replace(/(,$)/, "");
  return res;
}

function checkChecked() {
  [].forEach.call(checkboxes, checkbox => {
    checkbox.addEventListener("change", function() {
      checked.innerHTML = getResult();
    })
  })
}

checkChecked();

<form id="myForm">
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="peach" id="orange">
    <label for="orange">peach</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>
<div id="checked"></div>

Answer 7

   function add(element)
{
var fruits=document.getElementById("log").innerHTML;
var fruit=element.value;
if(fruits=="")
{
document.getElementById("log").innerHTML = fruit.toString();
}
else
{
if(document.getElementById(element.id).checked == true)
{
 fruits= fruits+' '+fruit.toString();
}
else
{
 fruits = fruits.replace(element.value,'');
}
document.getElementById("log").innerHTML=fruits;    
}    
}

    <form>
  <div>
    <input type="checkbox"  value="orange"  id="orange" onclick="add(this);">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox"  value="apple" id="apple" onclick="add(this);">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox"  value="banana" id="banana" onclick="add(this);">
    <label for="banana">banana</label>
  </div>
  <div id="log"></div>
</form>