Question

我有这个HTML，我必须检查其中一个thec checboxes被检查并获取所选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。我也不知道为什么如果我点击一个checbox我得到了所有这些的价值，而不仅仅是我点击的那个

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

Answer 1

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

您尝试实现的目标非常简单：

＆＃13;

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

＆＃13;

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

＆＃13;

<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/apple-touch-icon@2.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="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>

＆＃13;

Answer 2

复选框没有值。你设置public static void visitChildPages(String webSite) { driver.get(webSite); List<WebElement> liElements = driver.findElementsByClassName("company"); for(WebElement liElement : liElements) { List<WebElement> childs = liElement.findElements(By.xpath(".//*")); for(WebElement childEl : childs) { link = childEl.getAttribute("href"); if(StringUtils.isNotBlank(link) && link.contains("http")) { visitChildPages(link); } else { WebElement todaysClimate = childEl.findElement(By.id("ceoName")); } } } } 然后检查var checkbox = $(this).val() 只需使用$(checkbox).is(':checked')

即可

Answer 3

您希望绑定到复选框上的change事件，而不是整个文档上的click事件。这个部分没有任何意义：

$(document).on('click', function(event) {
   $('input:checkbox').on('click', function() {
     ... 
   });
});

只要您点击文档中的任何位置，它就会在所有复选框上绑定一个新的点击处理程序。

这是一个有效的例子：

＆＃13;

$(document).ready(function() {
  var output = $('#serviziSection2Def');
  $('.servizioSection2:checkbox').change(function() {
    output.text($('.servizioSection2:checkbox:checked').map(function() {
      return $(this).val();
    }).get().join(', '));
  })
});

＆＃13;

h1 { font-size: 16px; } /* just for readability on SO, ignore */

＆＃13;

<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="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>

<div id="serviziSection2Def">
</div>

＆＃13;

侧面注意：永远不要使用element.html(...)未使用的用户输入，因为这可能会破坏您的网站布局。尽可能使用element.text(...)，这会转义输入HTML。

复选框状态jQuery

3 个答案: