文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于先前选中的复选框(基于数据属性)隐藏/显示复选框

问基于先前选中的复选框(基于数据属性)隐藏/显示复选框
EN

Stack Overflow用户
提问于 2022-06-01 08:52:18
回答 1查看 47关注 0票数 0

我不知道如何隐藏/显示复选框，这取决于基于数据属性(数据-职业属性)的选择。

代码：https://codepen.io/caqoga/pen/RwQyRaQ

代码语言：javascript
复制
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div>
            <div>
                  <h2>Select profession</h2>
                <div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
                        <label class="form-check-label" for="profession1">Security guard</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
                        <label class="form-check-label" for="profession2">Welder</label>
                    </div>
                           
                </div>
                   <h2>Expected salary</h2>
                <div>
                    <div class="form-check profession_1">
                        <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
                        <label class="form-check-label" for="salary1">1000 EUR</label>
                    </div>
                    <div class="form-check profession_1">
                        <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
                        <label class="form-check-label" for="salary2">1500 EUR</label>
                    </div>
                    <div class="form-check profession_2">
                        <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
                        <label class="form-check-label" for="salary3">3500 EUR</label>
                    </div>
                                        
                </div>
            </div>
        </div>
</div>
代码语言：javascript
复制
$( document ).ready(function() { 

$('input[name="profession"]').change(function(){
            if (!$(this).is(':checked')) {
                $(this).prop('checked', true);
            } else {
                $(this).parent().siblings().find('input').prop('checked', false);
            }
        })

$('input[name="salary"]').change(function(){
            if (!$(this).is(':checked')) {
                $(this).prop('checked', true);
            } else {
                $(this).parent().siblings().find('input').prop('checked', false);
            }
        })

});

现在我想比较一下这两个输入中的数据--专业，如果它等于或不同--取决于.change --显示或隐藏整个复选框。

在这种情况下，我只想要1000欧元和1500欧元的安全警卫，只有欧元3500欧元的焊工。

如下所示：

代码语言：javascript
复制
$('input[name="profession"]').change(function(){

var idprof=$(this).attr('data-profession');
var idsalarytoprof=$('input[name="salary"]').attr('data-profession');
       
if (idprof == idsalarytoprof) {$('.proffesion_' + idsalarytoprof).show();} 
else {$('.proffesion_' + idsalarytoprof).hide();}
      
});
$('input[name="profession"]').trigger('change');

谢谢你的帮助。

javascript
html
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-01 09:44:51

2.要求你的方法：

禁用其他职业的输入(unchecked)

  • Hide其他职业的输入(未检查)

代码相同：

代码语言：javascript
复制
$('.example-1 input').change(function(){
  let profession = $(this).data('profession')
  if (!$(this).is(':checked')) {
    $(this).prop('checked', true);
  } else {
    $(this).parent().siblings().find('input').prop('checked', false);
    $('.' + profession).find('input').attr('disabled',false)
    $('.' + profession).siblings(':not(.' + profession + ')').find('input').attr('disabled',true).prop('checked', false)
  }
})

$('.example-2 input').change(function(){
  let profession = $(this).data('profession')
  if (!$(this).is(':checked')) {
    $(this).prop('checked', true);
  } else {
    $(this).parent().siblings().find('input').prop('checked', false);
    $('.' + profession).removeClass('hide').find('input').attr('disabled',false)
    $('.' + profession).siblings(':not(.' + profession + ')').addClass('hide').find('input').attr('disabled',true).prop('checked', false)
  }
})
代码语言：javascript
复制
.example-2 .hide {
  display: none;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="example-1">
    <h2>Select profession</h2>
    <div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
        <label class="form-check-label" for="profession1">Security guard</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
        <label class="form-check-label" for="profession2">Welder</label>
      </div>
    </div>
    
    <h2>Expected salary</h2>
    <div>
      <div class="form-check profession_1">
        <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1">
        <label class="form-check-label" for="salary1">1000 EUR</label>
      </div>
      <div class="form-check profession_1">
        <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
        <label class="form-check-label" for="salary2">1500 EUR</label>
      </div>
      <div class="form-check profession_2">
        <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled>
        <label class="form-check-label" for="salary3">3500 EUR</label>
      </div>
    </div>
  </div>
  <div class="example-2">
    <h2>Select profession examle 2</h2>
    <div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked="">
        <label class="form-check-label" for="profession1">Security guard</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21">
        <label class="form-check-label" for="profession2">Welder</label>
      </div>
    </div>
    <h2>Expected salary examle 2</h2>
    <div>
      <div class="form-check profession_11">
        <input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11">
        <label class="form-check-label" for="salary1">1000 EUR</label>
      </div>
      <div class="form-check profession_11">
        <input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21">
        <label class="form-check-label" for="salary2">1500 EUR</label>
      </div>
      <div class="form-check profession_21 hide">
        <input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31">
        <label class="form-check-label" for="salary3">3500 EUR</label>
      </div>
    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72458953

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档