Question

我有这个html，我需要根据一个参数选择一个特定的复选框。让我们说我的参数是15，所以我需要找到data-id = 15，然后获取关联的复选框并以编程方式检查此复选框。我试图使用jquery，但我对此并不十分熟悉。我需要从div开始搜索id =＆＃34; org_container_1＆＃34;。

<div class="department-container" id="org_container_1">
            <div class="row department-row" data-typeid="1" data-id="14">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org1</span>
                </label>                                        
            </div>
            <div class="row department-row" data-typeid="1" data-id="15">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org2</span>
                </label>                                        
            </div>
            <div class="row department-row" data-typeid="1" data-id="16">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org3</span>
                </label>                                        
            </div>

Answer 1

您可以使用选择器使用数据属性选择器[data-attribute-name=data-attribute-value]选择具有data-id的div。然后选中input[type=checkbox]复选框，并使用.prop()功能进行检查。

＆＃13;

$().ready(function() {
  $('div[data-id=15] input[type=checkbox]').prop('checked', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="department-container" id="org_container_1">
  <div class="row department-row" data-typeid="1" data-id="14">
    <label>
      <input type="checkbox">
      <span class="department-item">Org1</span>
    </label>
  </div>
  <div class="row department-row" data-typeid="1" data-id="15">
    <label>
      <input type="checkbox">
      <span class="department-item">Org2</span>
    </label>
  </div>
  <div class="row department-row" data-typeid="1" data-id="16">
    <label>
      <input type="checkbox">
      <span class="department-item">Org3</span>
    </label>
  </div>

＆＃13;

Answer 2

试试这个：

var param = 15;
$('[data-id="' + param + '"]').find('input').prop('checked',true);

Fiddle

Answer 3

所以你想在这里使用2件事。第一个是正确的jquery选择器，第二个是设置#attr('checked', true)：

$('div[data-id="' + id + '"] input[type=checkbox').attr('checked', true)

（你当然希望将它包装在一个函数中，但既然你已经提供了你的js看起来像什么，我没有任何关于你在哪里调用它的上下文）

Answer 4

另一种选择：

var param='15';
$('.department-container .department-row').each(function(){
    if($(this).attr('data-id')==param){
        $('input', this).attr('checked','checked');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="department-container" id="org_container_1">
    <div class="row department-row" data-typeid="1" data-id="14">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org1</span>
                </label>                                        
            </div>
            <div class="row department-row" data-typeid="1" data-id="15">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org2</span>
                </label>                                        
            </div>
            <div class="row department-row" data-typeid="1" data-id="16">                    
                <label>
                    <input type="checkbox">                    
                    <span class="department-item">Org3</span>
                </label>                                        
            </div>

使用JQuery检查复选框

4 个答案: