Показать/скрыть текстовые поля в зависимости от флажка

Question

Я хочу скрыть/показать текстовые поля при нажатии на флажки. Я уже искал переполнение стека, но я не получил решение ..

Вот мой код:

<div class="form-group has-feedback"> 
    <input type="text" class="form-control" placeholder="Email" id="email" name="email" > 
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
    </div> 

    <div class="form-group has-feedback"> 
    <input type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" > 
    <span class="glyphicon glyphicon-phone form-control-feedback"></span> 
    </div> 

Я хочу дать один чек имя ящика дисплей контактную информацию или нет. Если пользователь нажмет «да», я хочу показать эти два поля. Если пользователь не нажал, я хочу скрыть эти два поля.

Может ли кто-нибудь мне помочь?

Заранее благодарен.

Answer 1

function check(opt){ 
 
if(opt == 'yes'){ 
 
    document.getElementById('email').style.display=""; 
 
    document.getElementById('mobile').style.display=""; 
 
    document.getElementById("no").checked=false; 
 
} 
 
else 
 
if(opt == 'no'){ 
 
    document.getElementById('email').style.display="none"; 
 
    document.getElementById('mobile').style.display="none"; 
 
    document.getElementById("yes").checked=false; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group has-feedback"> 
 
    <input style="display:none;" type="text" class="form-control" placeholder="Email" id="email" name="email" > 
 
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
 
    </div> 
 
    <div class="form-group has-feedback"> 
 
    <input type="text" class="form-control" placeholder="Name" id="name" name="name" > 
 
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span> 
 
    </div> 
 
    <div class="form-group has-feedback"> 
 
    <input style="display:none;" type="text" class="form-control" placeholder="Mobile Number" name="mobile_number" id="mobile" > 
 
    <span class="glyphicon glyphicon-phone form-control-feedback"></span> 
 
    </div> 
 
    Yes : <input type="checkbox" onclick="check('yes');" id="yes" /> 
 
    No : <input type="checkbox" onclick="check('no');" id="no" />

Answer 2

Пожалуйста, проверьте

$(function(){ 
    $('your checkbox id or name').prop(true/false); 
    checkBoxOnchange(); 
}); 

function checkBoxOnchange() { 
    if ($('your checkbox id or name').is(":checked")) { 
     $("input[name='email']").show(); 
     $("input[name='mobile_number']").show(); 
    } else { 
     $("input[name='email']").hide(); 
     $("input[name='mobile_number']").hide(); 
    } 
} 

and in ur checkbox on-change event call checkBoxOnchange() 

Answer 3

Вы можете достичь этой простой задачи с помощью JQuery. Предположим, что у вас есть флажок с идентификатором контакт-информации, который вы должны проверить, который проверяется с помощью: отмеченного класса seudo и отображения типа входного дисплея none и блока отображения.

if('#contact-info').is(":checked")){ 
    $('#email,#mobile').css("display","block"); 
}else{ 
    $('#email,#mobile').css("display","none"); 
}