使用 jquery 或 java 脚本获取复选框值并显示 div答案

【问题标题】：Getting checkbox value and display a div using jquery or java script使用 jquery 或 java 脚本获取复选框值并显示 div
【发布时间】：2015-01-01 11:47:48
【问题描述】：

如果复选框值为“是”，我想显示一个默认隐藏的 div。这是我的html代码

 <div class="bestsell_wrapper">
    <div style="display:none;" itemprop="best-sell" class="best-sell"></div>
    <input type="checkbox" class="bestsell_chkbox" name="bestsellchk_box"
        value="<%=getCurrentAttribute('item','custitem_sumisho_overlay1')%>" style="display:none;" />  
</div>

有多个项目，复选框值为“是”我想显示具有类名“best-sell”的 div。我尝试过这个 jquery 代码，但它不起作用

<script type="text/javascript">
    $(".bestsell_chkbox").each(function(){
        if ($("this").val().trim() == "Yes")
        {
            $(".best-sell").css("display", "block");
        }
    });
</script>

【问题讨论】：

您是在单击复选框时还是在加载页面时尝试实现此行为？
那里有不平衡的括号和花括号，这根本不会运行。此外，您正在遍历 .bestsell_chkbox 类的所有复选框并运行该代码，而不是单击或检查更改。此外，$("this") 将尝试选择所有this 类型的元素。删除":$(this)
我使用 value="" 获取值，如果是，我需要显示 div
@user2787474 - 亲爱的，您需要格式化您的问题并提供更多信息。（比如它是否重复 div 和 Checkbox ，它是否在具有多行 ETC 的表内...）

标签： javascript jquery html css checkbox

【解决方案1】：

只需将您的 jQuery 更改为：

$(".bestsell_chkbox").each(function(){
    var $that = $(this);
    if ($that.val().trim() == "Yes") {
        $that.prev(".best-sell").css("display", "block"); 
    }
})

【讨论】：

它为每个项目条件显示此 div 不起作用
现在可以正常工作了 $(this).prev(".best-sell").css("display", "block");
酷。再做一次编辑来回答以捕捉有效的解决方案。

【解决方案2】：

您好，请按以下方式操作

if($(this).val().trim() == "Yes"){

【讨论】：

【解决方案3】：

使用这个：

 $("input.bestsell_chkbox[type='checkbox']").each(function () {
                if ($(this).attr("checked") !== "checked") {// do your stuff here}
});

【讨论】：

值是手动设置的，所以我只需要使用复选框类名检查值“是”
" style="display:none;" /> 为什么这很好你使用输入类型复选框不隐藏或文本w3.org/TR/html-markup/input.checkbox.html

【解决方案4】：

您的脚本中有一些错误。如果你想让它在加载时只显示复选框，这是完成它的代码。

$(".bestsell_chkbox").each(function(){
    if ($(this).val().trim() == "Yes"){
        $(".bestsell_chkbox").css("display", "block");
    }
});

您的代码试图显示 div，但您的 div 已经可见。您的复选框已隐藏。这就是为什么我在 if 子句中更改了类

【讨论】：

隐藏的
哦，对了。只需将类更改为 div 的类并从复选框中删除隐藏样式。或者添加一个代码，将复选框和 div 更改为 display:block

【解决方案5】：

使用此代码

<script type="text/javascript">
$(document).ready(function () {
    $(".bestsell_chkbox").each(function(){
    if ($(this).attr("checked"))
    {
        $(this).closest('.best-sell').css({'display':'block'});
    }
   });
});
</script>

【讨论】：