如何获得与复选框相关的标签值(我是否打破了jsfiddle)?

时间:2013-07-16 23:11:25

标签: jquery html jquery-ui jsfiddle

我需要构建一个用户选择的部门编号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/

6 个答案:

答案 0 :(得分:5)

请试试这个:

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/

答案 1 :(得分: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 );

答案 2 :(得分:1)

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

答案 3 :(得分:1)

您可以为复选框添加值:

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

答案 4 :(得分:1)

这就是你想要的答案:

<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也需要帮助。

答案 5 :(得分:1)

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

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>