How can I get the value of labels associated with checkboxes (and did I break jsfiddle)?

问题

I need to build a csv of dept numbers the user selects.

I started off with this HTML:

<button id="btnDept">select Depts</button>
<div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
    <div>
        <label for="ckbx2">2</label>
        <input type="checkbox" id="ckbx2" />
        <label for="ckbx3" id="lbl3">3</label>
        <input type="checkbox" id="ckbx3" />
    </div>
</div>

...and this jQuery:

var deptsSelected = '';
$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });
    $('checkbox').click(function() {
        deptsSelected += this.val + ',';
        alert(deptsSelected);
    });
});

...that does nothing about showing depts selected -- and that makes sense, as "this" is presumably the checkbox, and certainly not the label. I am going to have dozens of checkboxes in this dialog, and don't want to have to write something like this:

$('#ckbx3').click(function() { deptsSelected += $('lbl3').val + ','; alert(deptsSelected); });

...for each and every checkbox/label pair (even with this brute force approach, though, the code above showed this alert, not what I was expecting/hoping for:

Heavens to Murgatroid/what the kerfluffle?!?

The jsfiddle is here: http://jsfiddle.net/clayshannon/aWpPN/

回答1:

Please try this:

var deptsSelected = '';
$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });
    $("input:checkbox").click(function () {
        deptsSelected += $("label[for='" + this.id + "']").text() + ',';
        alert(deptsSelected);
    });
});

And here is the fiddle for it: http://jsfiddle.net/yFB6W/

回答2:

There are other methods, but this one will update an array with the splitted Number value out of your checked checkboxes ID

http://jsfiddle.net/aWpPN/1/

$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });
});

function getChecked() {         
   var deptsSelected = [];
   $('#dialog :checked').each(function() {
        deptsSelected.push( this.id.split('ckbx')[1] );
   });
   alert( deptsSelected );
}

$('#dialog').find('input').change( getChecked );

回答3:

Replace this.val() with $('label[for="'+$(this).attr('id')+'"]').html(). $('checkbox') should be $('input[type="checkbox"])

回答4:

You can add value to your checkboxes:

<input type="checkbox" id="ckbx2" value="2" />

回答5:

This in the answer you want:

<input type='button' id='btnDept' value='Depts' />
<div id='dialog' title='Select the Depts you want to include in the report'>
  <div>
    <label for='ckbx2'>2</label>
    <input type='checkbox' id='ckbx2' value='2' />
    <label for='ckbx3' id='lbl3'>3</label>
    <input type='checkbox' id='ckbx3' value='3' />
  </div>
</div>
var deptsSelected = [];
$("#btnDept").click(function(){
  $("#dialog").dialog({
    modal: true
  });
});
$(':checkbox').click(function(){
  $(':checkbox').each(function(i){
    if($(this).is(':checked')){
      deptsSelected[i] = $(this).val();
    }
    else{
      deptsSelected.splice(i, 1);
    }
  });
  alert(deptsSelected.join());
});

I put a new fiddle at http://jsfiddle.net/PHPglue/akp7Q/1/ . You forgot values for your checkboxes and your jQuery needed help as well.

回答6:

By adding value to the checkboxes same as you have in label.

<div class="col-lg-12" id="checkBoxContainer">
    <div class="checkbox checkbox-primary checkbox-inline">
        <input type="checkbox" id="checkbox1" value="value1" checked="">
        <label for="checkbox1"> value1 </label>
    </div>
    <div class="checkbox checkbox-primary checkbox-inline">
        <input type="checkbox" id="checkbox2" value="value2" checked="">
        <label for="checkbox2"> value2 </label>
    </div>
</div>

And than iterate over container getting those values. (example only checked)

var checkboxArray =[];

$('#checkBoxContainer :checked').each(function() { checkboxArray.push($(this).val()); });

来源：https://stackoverflow.com/questions/17688489/how-can-i-get-the-value-of-labels-associated-with-checkboxes-and-did-i-break-js