jquery - 如何获取与复选框关联的标签的值（我是否破坏了 jsfiddle）？

Question

我需要建立一个用户选择的部门编号的 csv。

我从这个 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>

...还有这个 jQuery：

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

...这对显示选定的部门没有任何作用——这是有道理的，因为“this”可能是复选框，当然不是标签。我将在这个对话框中有几十个复选框，并且不想写这样的东西：

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

...对于每个复选框/标签对（尽管如此，即使使用这种蛮力方法，上面的代码也显示了此警报，而不是我所期望/希望的：

天上的 Murgatroid/什么 kerfluffle?!?

jsfiddle 在这里：http: //jsfiddle.net/clayshannon/aWpPN/

Answer 1

请试试这个：

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

这是它的小提琴：http: //jsfiddle.net/yFB6W/

Answer 2

还有其他方法，但是这个方法将使用您选中的复选框 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 );

Answer 3

替换this.val()为$('label[for="'+$(this).attr('id')+'"]').html()。$('checkbox')应该$('input[type="checkbox"])

Answer 4

您可以为复选框添加价值：

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

Answer 5

这在你想要的答案中：

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

我在http://jsfiddle.net/PHPglue/akp7Q/1/放了一个新小提琴。您忘记了checkboxes 的值，您的 jQuery 也需要帮助。

Answer 6

通过将值添加到与标签中相同的复选框。

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

而不是遍历容器获取这些值。（仅检查示例）

var checkboxArray =[];

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