Question

我编写的代码创建了一个复选框列表，当我点击我的选项列表下方的复选框时，我想要一个链接显示在用户可以单击（显示/隐藏）下面我无法弄清楚为什么我的代码不会工作。如果用户取消选中该框，则链接消失，但单击我的复选框时没有任何反应。我想在JQuery中做这个修复

 <!DOCTYPE html>
 <html>
    <div class ="container">
    <head></head>
    <body>
        <input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />  
        <label for="grp1"> group 1 </label>    
        <div>
           <input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" > 
           group_2</label>
        </div>
    </body>
 </html>

Answer 1

你必须使用javascript来隐藏/显示html中想要的元素。有很多方法可以解决这个问题。最基本的就是

<!DOCTYPE html>
<html>
<body>
<div id="container">
    <input id="grp1" type="checkbox" value="group_1"/>
    <label for="grp1"> group 1 </label>
    <br>
    <input id="grp2" type="checkbox" value="group_2"/>
    <label for="grp2"> group_2</label>

    <!--hidden elements using css-->
    <a href="#" id="url1" style="display: none;">Link for group_1</a>
    <br>
    <a href="#" id="url2" style="display: none;">Link for group_2</a>
</div>

<script>

    //listen to the click event on the whole container
    document.getElementById("container").onclick = function (e) {

        //check every box if it's checked
        if (document.getElementById('grp1').checked) {
            document.getElementById('url1').style.display = 'block';
        } else {
            document.getElementById('url1').style.display = 'none';
        }

        if (document.getElementById('grp2').checked) {
            document.getElementById('url2').style.display = 'block';
        } else {
            document.getElementById('url2').style.display = 'none';
        }


    }
</script>
</body>
</html>

当然你可以使用不同的方法，比如在javascript中创建元素，然后将它添加到html，如果你不喜欢这个想法，如果现有的隐藏元素。您也可以使用循环来遍历checkbox元素，并相应地显示/隐藏URL。更多的是使代码在任意数量的盒子上灵活。像这样的东西

<!DOCTYPE html>
<html>
<body>
<div id="container">
    <div id="checkBoxContainer">
    <input id="grp1" type="checkbox" value="group_1"/>
    <label for="grp1"> group 1 </label>
    <br>
    <input id="grp2" type="checkbox" value="group_2"/>
    <label for="grp2"> group_2</label>
    </div>
    <!--hidden elements using css-->
    <a href="#" id="url1" style="display: none;">Link for group_1</a>
    <br>
    <a href="#" id="url2" style="display: none;">Link for group_2</a>
</div>

<script>

    //listen to the click event on the whole container
    document.getElementById("checkBoxContainer").onclick = function (e) {
        var linkNumber = 1; //This is number of the first url element with ud url1
        var containerChildren = document.getElementById("checkBoxContainer").children;

        //loop through the children elements
        for (var i = 0; i < containerChildren.length; i++) {

            var oneChild = containerChildren[i]; //catch only one child in a variable

            //simply filter the input elements which are of type checkbox
            if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){

                //Show or hide the url accordingly.
                if (oneChild.checked) {
                    document.getElementById('url' + linkNumber++).style.display = 'block';
                } else {
                    document.getElementById('url' + linkNumber++).style.display = 'none';
                }
            }
        }
    }
</script>
</body>
</html>

Answer 2

onclick HTML attribute并没有这样做。属性值以javascript的形式执行。您可以创建一个js函数来显示/隐藏链接。

Answer 3

您好想试试这个：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .group-link{
                display: block;
            }
            .hidden{
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="jsParent">
            <label for="grp1">
                <input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/>   group 1
            </label>
            <a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
        </div>

        <div class="jsParent">
            <label for="grp2">
                <input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/>  group_2
            </label>
            <a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
        </div>
        <script type="text/javascript">
            function showLink(el){
                var parent = el.parentElement.parentElement;
                var linkEl = getAnchorEl(parent);
                if(linkEl){
                    if(el.checked){                     
                        linkEl.classList = linkEl.classList.value.replace('hidden', '');
                    }else{
                        linkEl.classList = linkEl.classList.value + ' hidden';
                    }
                }
            }

            function getAnchorEl(parent){
                var childrens = parent.children;
                var linkEl = null;
                for (var i = 0; i < childrens.length; i++) {
                    var childEl = childrens[i];
                    if(childEl.classList.value.indexOf('jsLink') > -1){
                        linkEl = childEl;
                        break;
                    }
                }
                return linkEl;
            }
        </script>
</body>
</html>

Answer 4

您的问题无疑是重复的，但我正在回答，因为我想帮助您确定您发布的代码的问题。

我注意到您的代码和代码之间有<div>标记。为什么？这有点过于简化，但作为一般规则，永远不要在<html>和<head>标记之间放置任何内容，只在<div>标记内放置<body>标记。还要注意你如何嵌套你的元素。该标签在之前和之后开始。
即使这是正确的位置，您也可以在身体标记中间任意关闭div之前关闭它。你永远不应该

<div> <p> </div> </p>

相反它看起来应该是这样的

<div>
   <p>
   </p>
</div>

在onClick属性中，您有一个随机网址。那不会打开一个新窗口。你也新增了一些javascript。

<input onClick="window.open('http://google.com')">

此外，您的第二个标签代码没有开头，只有</label>关闭代码

要回答你的问题 - 我建议你看一下jQuery切换功能。

<input type="checkbox" id="displayLink" />
<a href="http://google.com" id="googleLink" style="display:hidden;">Google</a>
<script type="text/javascript">
    $("#displayLink").click(function(){
        $("#googleLink").toggle();
    });
</script>

作为一般规则，您应该使用事件处理程序（例如上面发布的$("").click()）来处理事件（例如点击）而不是像onClick这样的html属性。

html复选框列表，在筛选时显示和隐藏链接

4 个答案:

要回答你的问题 - 我建议你看一下jQuery切换功能。