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

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

$（'＃ckbx3'）。click（function（）{ deptsSelected + = $（'lbl3'）。val +'，'; 警报（deptsSelected）; }）;

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

enter image description here

天堂到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/放了一个新小提琴。您忘记了checkbox es的值，您的jQuery也需要帮助。

Answer 6

通过向标签中的复选框添加值。

function Person (name, age, newParameter){
this.name = name;
this.age = age;
this.newParameter = newParameter;
}

然后迭代容器获取这些值。 （仅检查示例）

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

如何获得与复选框相关的标签值（我是否打破了jsfiddle）？

6 个答案: