Установите флажки с помощью JQuery

Question

У меня есть этот html, мне нужно выбрать конкретный флажок, основанный на одном параметре. Скажем, мой параметр равен 15, поэтому мне нужно найти data-id = 15, а затем установить связанный флажок и программно проверить этот флажок. Я пытаюсь использовать jquery, но я не очень хорошо знаком с этим. Мне нужно начать поиск из div с id = "org_container_1".

<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

Другой вариант:

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>

Answer 2

так что вы хотите использовать 2 вещи здесь. Первый из них является правильным селектором JQuery, а второй установив #attr('checked', true):

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

(Youd хочет, чтобы обернуть это в зависимости, конечно, но так как вы havnt при условии, что ваш JS выглядит, я не имею никакого контекста где вы звоните так)

Answer 3

Вы можете использовать селекторы, чтобы выбрать свой div с идентификатором данных, используя селектор атрибутов данных [data-attribute-name=data-attribute-value]. Затем установите флажок с input[type=checkbox] и воспользуйтесь функцией .prop(), чтобы проверить его.

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

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

Answer 4

Попробуйте это:

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

Fiddle