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

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

$( "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 2

您需要进行一些更改

• 如果想要选择多个单选按钮，则可以保持名称不同或使用复选框。

• 维护属性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 3

很多像.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 4

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

async

$( "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 );
});

Answer 5

$( ":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 6

简单 JavaScript 解决方案：

有一个循环：

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有两个循环：

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

＆＃13;

＆＃13;

   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;    
}    
}

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;