Показать скрытые поля, когда установлен флажок?

Question

Привет У меня есть несколько флажков подобного типа. Я использую javascript в этом флажке, чтобы показывать скрытые поля. Я создал js-код, который работает для одного флажка, я хочу применить код, который будет работать для всех флажков.

<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <div class="col-md-2"> 
      <label>Practical Course:</label>&nbsp;&nbsp; 
      <input id="checkbox" type="checkbox"> 
      </div> 

      <div class="col-md-4" id="box" style="display: none;"> 
       <input type="number" name="practical1" class="form-control"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <div class="col-md-2"> 
      <label>Practical Course:</label>&nbsp;&nbsp; 
      <input id="checkbox" type="checkbox"> 
      </div> 

      <div class="col-md-4" id="box" style="display: none;"> 
       <input type="number" name="practical2" class="form-control"> 
      </div> 
     </div> 
    </div> 
</div> 

JS код: -

var checkbox = document.getElementById('checkbox'); 
var box = document.getElementById('box'); 
checkbox.onclick = function() { 
    console.log(this); 
    if (this.checked) { 
     box.style['display'] = 'block'; 
    } else { 
     box.style['display'] = 'none'; 
    } 
};  

Теперь вещь я могу сделать индивидуальный JavaScript для всех флажков, но который будет содержать многочисленную JS код, я хочу, чтобы одна Javascript функция может отобразить элементы из каждый флажок при нажатии. Один js-код должен работать для всех флажков. Пожалуйста, предоставьте способ сделать это с помощью простого javascript или jquery.

Answer 1

Используйте javascript function, чтобы сделать это.

function toggleFields(boxId, checkboxId) { 
 
    var checkbox = document.getElementById(checkboxId); 
 
    var box = document.getElementById(boxId); 
 
    checkbox.onclick = function() { 
 
    console.log(this); 
 
    if (this.checked) { 
 
     box.style['display'] = 'block'; 
 
    } else { 
 
     box.style['display'] = 'none'; 
 
    } 
 
    }; 
 
} 
 
toggleFields('box1', 'checkbox1'); 
 
toggleFields('box2', 'checkbox2');

<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <!--<input id="checkbox" type="checkbox">--> 
 
     <input id="checkbox1" type="checkbox"> 
 
     </div> 
 
     <!--<div class="col-md-4" id="box" style="display: none;">--> 
 
     <div class="col-md-4" id="box1" style="display: none;"> 
 
     <input type="number" name="practical1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <!--<input id="checkbox" type="checkbox">--> 
 
     <input id="checkbox2" type="checkbox"> 
 
     </div> 
 
     <!--<div class="col-md-4" id="box" style="display: none;">--> 
 
     <div class="col-md-4" id="box2" style="display: none;"> 
 
     <input type="number" name="practical2" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Хорошо это, как это работает, каждый флажок будет иметь id из его box как класс, так что когда-либо, что флажок щелкнули, мы будем использовать его класс, чтобы сделать его box видно. Это будет работать, даже если у вас есть 1000 флажков

var checkbox = document.querySelectorAll("#check1, #check2"); 
 
for (i = 0; i < checkbox.length; i++) { 
 
    checkbox[i].onclick = function() { 
 

 
    if (this.checked) { 
 
     document.getElementById(this.getAttribute('class')).style['display'] = 'block'; 
 
    } else { 
 
     document.getElementById(this.getAttribute('class')).style['display'] = 'none'; 
 
    } 
 
    }; 
 
}

<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <input id="check1" type="checkbox" class="box"> 
 
     </div> 
 

 
     <div class="col-md-4" id="box" style="display: none;"> 
 
     <input type="number" name="practical1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <input id="check2" type="checkbox" class="box2"> 
 
     </div> 
 

 
     <div class="col-md-4" id="box2" style="display: none;"> 
 
     <input type="number" name="practical2" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Вы можете использовать код, как это то, что я сделал в этом каждый ваш флажок идентификатор создания, как это «checkbox_1» и ваш ящик ид как этот box_1 и т. д. другие номера, пожалуйста, проверьте ниже код, вы получите представление о том, что вам нужно сделать с вашим html и java-скриптом.

<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <div class="col-md-2"> 
      <label>Practical Course:</label>&nbsp;&nbsp; 
      <input id="checkbox_1" type="checkbox" onclick="myfunction(this);"> 
      </div> 

      <div class="col-md-4" id="box_1" style="display: none;"> 
       <input type="number" name="practical1" class="form-control"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <div class="col-md-2"> 
      <label>Practical Course:</label>&nbsp;&nbsp; 
      <input id="checkbox_2" type="checkbox" onclick="myfunction(this);"> 
      </div> 

      <div class="col-md-4" id="box_2" style="display: none;"> 
       <input type="number" name="practical2" class="form-control"> 
      </div> 
     </div> 
    </div> 
</div> 


<script> 
function myfunction(obj) 
{ 
     var element_index = obj.id.split("_"); 
     console.log('box_'+element_index[1]); 
     var box = document.getElementById('box_'+element_index[1]); 
     if(obj.checked) { 
     box.style['display'] = 'block'; 
     } else { 
     box.style['display'] = 'none'; 
     } 

} 
</script> 

Здесь, в скрипте, я дал имя функции myfunction, но вы можете указать имя своей функции в соответствии с вашими потребностями. может это полезно для вас.

Answer 4

Наиболее сужен (статический) предложение из вашего кода:

$(document).ready(function() { 
    $('input[type=checkbox]').change(function(){ 
     if($(this).prop('checked')){ 
      $(this).parent().next().show(); 
     }else{ 
      $(this).parent().next().hide(); 
     } 
    }); 
}); 

Используйте атрибут класса, чтобы получить динамический процесс.

Answer 5

Да, вы можете это сделать. Решение в нижнем коде. Я сделал это с помощью JQuery.

$('input[type="checkbox"]').click(function(){ 
 
    console.log(this); 
 
// $(this).parent().next().css('display','block'); 
 
    $(this).parent().next().toggle('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <div class="col-md-2"> 
 
      <label>Practical Course:</label>&nbsp;&nbsp; 
 
      <input name="chkbox" type="checkbox"> 
 
      </div> 
 

 
      <div class="col-md-4" data-box="box" style="display: none;"> 
 
       <input type="number" name="practical1" class="form-control"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <div class="col-md-2"> 
 
      <label>Practical Course:</label>&nbsp;&nbsp; 
 
      <input name="chkbox" type="checkbox"> 
 
      </div> 
 

 
      <div class="col-md-4" data-box="box" style="display: none;"> 
 
       <input type="number" name="practical2" class="form-control"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

Первый Пожалуйста, укажите в своем уме «идентификатор» будет применяться только на одном elemnt на каждой странице для нескольких элементов можно применить «класс»

id="checkbox" заменить на class="checkbox"

в Jquery

$(document).ready(function(){ 
 

 
$(".checkbox").change(function(){ 
 
    \t \t 
 
    if($(this).prop("checked")){ 
 
    \t $(this).parents(".row").find(".box").show(); 
 
    }else{ 
 
    \t 
 
    $(this).parents(".row").find(".box").hide(); 
 
    } 
 
    }); 
 
}); 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <div class="col-md-2"> 
 
      <label>Practical Course:</label>&nbsp;&nbsp; 
 
      <input class="checkbox" type="checkbox"> 
 
      </div> 
 

 
      <div class="col-md-4 box" style="display: none;"> 
 
       <input type="number" name="practical1" class="form-control"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <div class="form-group"> 
 
      <div class="col-md-2"> 
 
      <label>Practical Course:</label>&nbsp;&nbsp; 
 
      <input class="checkbox" type="checkbox"> 
 
      </div> 
 

 
      <div class="col-md-4 box" style="display: none;"> 
 
       <input type="number" name="practical2" class="form-control"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 7

Попробуйте на функции вызова OnChange событие Ваш чек бокса OnChange = "showHiddenField (это)"

и функция как

function showHiddenField(currentObject) { 
    var inputDiv = $(currentObject).parent().next(); 
    if ($(currentObject).is(":checked")) { 
     $(inputDiv).show().focus(); 
    } 
    else { 
     $(inputDiv).hide(); 
    } 
} 

Answer 8

Вы можете использовать querySelectorAll("[type='checkbox']"), чтобы выбрать все checkbox и выполнить итерацию по элементам с помощью цикла for.

Примечание: id должен быть уникальным для каждого элемента.

var checkbox = document.querySelectorAll("[type='checkbox']"); 
 
for (i = 0; i < checkbox.length; i++) { 
 
    checkbox[i].onclick = function() { 
 

 
    if (this.checked) { 
 
     document.getElementById(this.getAttribute('class')).style['display'] = 'block'; 
 
    } else { 
 
     document.getElementById(this.getAttribute('class')).style['display'] = 'none'; 
 
    } 
 
    }; 
 
}

<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <input id="check1" type="checkbox" class="box"> 
 
     </div> 
 

 
     <div class="col-md-4" id="box" style="display: none;"> 
 
     <input type="number" name="practical1" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group"> 
 
     <div class="col-md-2"> 
 
     <label>Practical Course:</label>&nbsp;&nbsp; 
 
     <input id="check2" type="checkbox" class="box2"> 
 
     </div> 
 

 
     <div class="col-md-4" id="box2" style="display: none;"> 
 
     <input type="number" name="practical2" class="form-control"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 9

Проверено на Google Chrome работает.

получает идентификатор ввода, принимает номер после строки «checkbox (gets_target)». создает идентификатор с добавлением этого числа к концу "коробки" + номер строки

HTML:

<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox"> 
<div id="box2" style="display:none;">content</div> 

Javascript:

function display_hidden_field(checkbox){ 
    var box_id = checkbox.id; 
    var search_pattern = /checkbox(.*?)$/g; 
    var number = search_pattern.exec(box_id); 
    number = number[1]; 
    box_id = 'box'+number; 
    var box = document.getElementById(box_id); 
    if(checkbox.checked){ 
    box.style.display = 'block'; 
    }else{ 
    box.style.display = 'none'; 
    } 
}