javascript/html：使复选框检查时需要输入字段答案

【问题标题】：javascript/html:make input fields required on checkbox checkjavascript/html：使复选框检查时需要输入字段
【发布时间】：2018-07-18 19:19:31
【问题描述】：

因此，就像我想在选中复选框时将输入字段设为必需，而在未选中复选框时设为“不需要”...我尝试了以下代码，但它不起作用...请帮助...

<form action="#">
    <input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
    <script>

    function req(){
        var req = document.getElementById("req");
        var checkBox = document.getElementById("check");
        if (checkBox.checked == true){
            alert("checked")
            req.required==true

        } else {
          alert("uncheck")
          req.required==false
        }

    }



    </script>

【问题讨论】：

If checkbox selected make input required的可能重复
这不是完全重复，但很接近。更重要的是，这毫无意义。如果复选框被选中，则它的值正在被提交，因此将其标记为必需是多余的。如果未选中，则其值为空，因此将其标记为不需要也是多余的。我认为您应该将复选框设为可选并继续。
no...输入字段 type="text" 不是复选框本身是必需的

标签： javascript html required

【解决方案1】：

试试这个：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">
                    <form name="test" id="test" action="#" method="GET">
                        <div class="input-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="cbox">
                                <label class="form-check-label" for="cbox">Make field required</label>
                            </div>
                        </div><br>

                        <div class="input-group">
                            <input type="text" id="tbox" class="form-control">
                        </div><br>
                        <button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
                        <small><span class="status"></span></small>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // On click of checkbox
            $('#cbox').click(function() {
                // Check if it's checked
                if ($(this).prop('checked')) {
                    // Add the required attribute to the text input
                    $('#tbox').attr('required', '');
                    // log our results and display a small indicator span status
                    console.log('input is now required');
                    $('.status').text('input is now required');
                } else {
                    // If it isn't checked, remove the required attribute
                    $('#tbox').removeAttr('required');
                    // log our results and display a small indicator span status
                    console.log('input is no longer required');
                    $('.status').text('input is no longer required');
                }
            });
        });
    </script>
</body>

</html>

【讨论】：

但是为什么这么长
我会赞成你的回答，但我的声誉少于 15 个
乐于助人；我的例子很长，因为我包含了 cmets/任意代码来展示它是如何工作的 :)