показать и скрыть div на основе выбора флажка, используя javascript

-4

Привет, у меня есть требование скрывать и отображать деление на основе выбора флажка. В настоящее время я должен показать и скрыть 10 делений, и для этого предусмотрен флажок. Также должно быть на флажке selet все, что будет проверять все флажки, и все 10 div должны отображаться. После того, как пользователь щелкнет, выберите все, что теперь нужно изменить, чтобы отменить выбор всех, чтобы отменить выбор all.Once, если все выбрано, щелчок будет отменять все флажки и не будет отображаться деление. Пожалуйста, предоставьте мне javascript-решение, а не jquery. Вот кодпоказать и скрыть div на основе выбора флажка, используя javascript

<html> 
<head> 
<script type="text/javascript"> 
var checkflag = "false"; 
function check(field) { 
    if (checkflag == "false") { 
    for (i = 0; i < field.length; i++) { 
     field[i].checked = true; 
    } 
    checkflag = "true"; 
    return "Uncheck All"; 
    } else { 
    for (i = 0; i < field.length; i++) { 
     field[i].checked = false; 
    } 
    checkflag = "false"; 
    return "Check All"; 
    } 
} 

function ShowHideDiv(chkPassport) { 
     var dvPassport = document.getElementById("dvPassport"); 
     dvPassport.style.display = chkPassport.checked ? "block" : "none"; 
    } 

</script> 
</head> 
<body> 
    <form name=myform action="" method=post> 
     <table> 
      <tr> 
       <td><strong>Make a selection</strong><br> <input 
        type=checkbox name=list id="chkPassport" 
        onclick="ShowHideDiv(this)" value="1">Java<br> <input 
        type=checkbox name=list value="2">JavaScript<br> <input 
        type=checkbox name=list value="3">ASP<br> <input 
        type=checkbox name=list value="4">HTML<br> <input 
        type=checkbox name=list value="5">SQL<br> <br> <input 
        type=button value="Check All" 
        onClick="this.value=check(this.form.list)"></td> 
      </tr> 
     </table> 
     <div id="dvPassport" style="display: none"> 
      Passport Number: <input type="text" id="txtPassportNumber" /> 
     </div> 
    </form> 
</body> 
</html>

источник

2015-09-14 Mukesh Kumar

Вы не можете запросить решение. Вы должны опубликовать то, что вы пробовали, продемонстрировать некоторые усилия. – Chris

Вы можете сделать это с помощью следующего кода JQuery:

$('.checkbox').click(function() { 
    if($(this).is(':checked')) { 
     $("#yourdiv").show(); 
    } else { 
     $("#yourdiv").hide(); 
    } 
    });

Изменение #yourdiv - и .checkbox ваших идентификаторов CSS.

источник

2015-09-14 06:36:40 rawrJoel

вот мой код –

Где? Я не вижу ваш код. – rawrJoel

показать и скрыть div на основе выбора флажка, используя javascript

ответ

Смежные вопросы