复选框状态jQuery

debugcn 发表于 Dev

丹妮尔·马蒂尼（Daniele Martini）

我有这个HTML，我必须检查其中的一个checbox是否已选中，并获取所选checbox的值以将其添加到数组中。我尝试了不同的代码，但我不知道问题出在哪里

<div class="row ">   
    <div class="col-md-5 col-md-offset-1 col-centered ">
        <input type="checkbox" id="piega1" class="servizioSection2" name="imgSection2"value="PiegaByWellaProfessionals">
        <label class="piega" for="piega1">
            <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
    </div>
    <div class="col-md-5  col-centered piege">
        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="PiegaBySystemProfessionals">
        <label for="piega2" class="piega ">
            <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
    </div>
</div>

这是检查checbox状态的Jquery。我也不知道为什么如果我点击一个复选框，我会得到所有它们的价值，而不仅仅是我点击的那个

$(document).on('click', function(event) {
   var serviziSection2 = $('#serviziSection2Def');
   $('input:checkbox').on('click', function(){
     var servizi = [];
     $('.servizioSection2:checkbox').each(function(){
       var checkbox = $(this).val();
             console.log(checkbox)
       if($(checkbox).is(':checked') == true){
           servizi.push(checkbox.next('label').html());
           console.log(servizi)
       }
     });
     serviziSection2.html(servizi.join(', '));
   });
});

SpYk3HH

首先，每次单击中的任何内容时，您都将为所有复选框分配一个新的click事件document。其次，jQuery已经为此提供了一些简单的内置功能。看一眼.serializeArray()

您要实现的目标很简单：

//  this is typical starter for a block of jQuery code.
//  this is same as document.ready = function() { ...
$(function() {
  //  this sets events on ALL elements matching selector, 
  //  including dynamically created ones (inserted by JavaScript code)
  $(document)  //  as you can see, i'm assigning a 'change' event to 'input[type=checkbox]'s
    .on('change', 'input[type=checkbox]', function(e) {
      //  first i set a variable containing an array of Name/Value Objects of all CHECKED checkboxes
      //  this will NOT grab values of any unchecked box
      var checked = $('input').serializeArray(),
          //  this next variable simply creates an array of ONLY the values from our previous array.
          values = checked.map(function(val, key) { return val.value });
      
      //  display values as a single string of text
      $('fieldset pre').text(values.join(', '));
      
      //  and if you still want that HTML part
      //  this first variable gets all labels that only follow CHECKED inputs
      var $checkedInputs = $('input:checked + label'),
          //  creating simple placeholder element variable to get all the HTML onto
          newHTML = $('<div/>');
      //  add each needed piece of HTML to our placeholder
      $checkedInputs.each(function(index) { newHTML.append($(this).html()); });
      //  display output of our new HTML
      //  newHTML.html() will output ONLY the html we put into it, and NOT the outer div created for this variable
      $('fieldset p').html(newHTML.html());
    });
})

img { height: 50px; }
h1 { display: inline-block; font-size: 1.25em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row ">   
    <div class="col-md-5 col-md-offset-1 col-centered ">
        <input type="checkbox" id="piega1" class="servizioSection2" name="imgSection2"value="PiegaByWellaProfessionals">
        <label class="piega" for="piega1">
            <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]" for="piega1" alt="" class="img-responsive immaginePiega ">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
    </div>
    <div class="col-md-5  col-centered piege">
        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="PiegaBySystemProfessionals">
        <label for="piega2" class="piega ">
            <img src="http://i.stack.imgur.com/CE5lz.png" for="piega2" alt="" class="img-responsive immaginePiega">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
    </div>
</div>
<fieldset>
  <legend>Output</legend>
  <h3>values</h3>
  <pre></pre>
  <hr />
  <h3>HTML</h3>
  <p></p>
</fieldset>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。