Javascript 筛选时显示和隐藏链接的html复选框列表_Javascript_Jquery_Html_Checkbox

Javascript 筛选时显示和隐藏链接的html复选框列表

javascript jquery html checkbox

Javascript 筛选时显示和隐藏链接的html复选框列表,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我编写的代码创建了一个复选框列表，当我单击选项列表下面的复选框时，我希望在下面显示一个链接，用户可以单击（显示/隐藏），我无法理解为什么我的代码无法工作。如果用户取消选中该复选框，链接将消失，但单击复选框时不会发生任何事情。我想在JQuery中进行此修复 <!DOCTYPE html> <html> <div class ="container"> <head></head> <body>

我编写的代码创建了一个复选框列表，当我单击选项列表下面的复选框时，我希望在下面显示一个链接，用户可以单击（显示/隐藏），我无法理解为什么我的代码无法工作。如果用户取消选中该复选框，链接将消失，但单击复选框时不会发生任何事情。我想在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>


第一组
第2组

系统不是那样工作的。属性值作为javascript执行。您可以使用js函数来显示/隐藏链接。

您好，您想试试这个：

<!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>


.组链接{
显示：块；
}
.隐藏{
显示：无；
}
第一组
第2组
功能显示链接（el）{
var parent=el.parentElement.parentElement；
var linkEl=getAnchorEl（母公司）；
if（linkEl）{
如果（el.checked）{
linkEl.classList=linkEl.classList.value.replace（'hidden'，''）；
}否则{
linkEl.classList=linkEl.classList.value+“隐藏”；
}
}
}
函数getAnchorEl（父函数）{
var childrens=parent.childrens；
var linkEl=null；
对于（变量i=0；i-1）{
linkEl=childEl；
打破
}
}
返回linkEl；
}

您必须使用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>


第一组


第2组


//侦听整个容器上的单击事件
document.getElementById（“容器”）.onclick=function（e）{
//如果选中，请选中每个框
if（document.getElementById（'grp1'）。选中）{
document.getElementById（'url1'）.style.display='block'；
}否则{
document.getElementById（'url1'）.style.display='none'；
}
if（document.getElementById（'grp2'）。选中）{
document.getElementById（'url2'）.style.display='block'；
}否则{
document.getElementById（'url2'）.style.display='none'；
}
}

当然，您可以使用不同的方法，比如在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>

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


第一组


第2组


//侦听整个容器上的单击事件
document.getElementById（“checkBoxContainer”）.onclick=function（e）{
var linkNumber=1；//这是具有ud url1的第一个url元素的编号
var containerChildren=document.getElementById（“checkBoxContainer”）.children；
//循环遍历子元素
对于（变量i=0；i

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

我注意到您的标签和标签之间有一个

标签。为什么？这有点过于简化，但一般来说，不要在

和

标记之间放置任何东西，而只将

标记放在

标记内。还要注意如何嵌套元素。该标记从后面和前面开始

即使是正确的位置，你也可以在你的身体标记中间任意关闭你的div之前关闭。你不应该这样

相反，它应该是这样的

<!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>

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

在onClick属性中有一个随机URL。这不会打开新窗口。你也在里面放了一些javascript

另外，您的第二个标签标签没有开口，只有一个

关闭标签

要回答您的问题，我建议您看看jQuery切换函数。


$（“#显示链接”）。单击（函数（）{
$（“#谷歌链接”）.toggle（）；
});

一般来说，您应该倾向于使用事件处理程序（如上面发布的

$（“”）。click（）

来处理事件（如单击），而不是像onClick这样的html属性。

可能重复的谢谢！第一种方法是完美的，100%有意义，我喜欢comments@JaclynBlumenthal没问题。第二个示例与此完全相同，但在javascript中使用

for

循环遍历元素，而不是在c中逐个检查