如果 div 存在且具有值，如何显示或隐藏 div

Question

<fieldset class=​"crm-public-form-item crm-group payment_options-group" style=​"display:​ block !important;​ visibility:​ visible;​">​
<div class=​"crm-public-form-item crm-section payment_processor-section" style=​"display:​ block;​">​
  <div class=​"content">    
    ​<input class=​"payment_processor_1 crm-form-radio" value=​"5" type=​"radio" id=​"CIVICRM_QFID_5_payment_processor_id" name=​"payment_processor_id">    
    <input class=​"payment_processor_2 crm-form-radio" value=​"3" type=​"radio" id=​"CIVICRM_QFID_3_payment_processor_id" name=​"payment_processor_id">​
  </div>​
 </div>​
</fieldset>​

<div id=​"crm-submit-buttons" class=​"crm-submit-buttons" style=​"visibility:​ visible;​ display:​ block;​">
​  <button class=​"crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value=​"1" type=​"submit" name=​"_qf_Main_upload" id=​"_qf_Main_upload-bottom">​…​</button>​
</div>​

我有这个 html 块，但我有点卡住了验证。条件是

• payment_options-group 字段集必须显示在此页面上
• 并且至少有一个单选按钮被选中
• 然后显示 crm-submit-buttons div
• 否则隐藏 crm-submit-buttons div

我尝试了以下但无法使其工作，也不确定如何定义条件 payment_options-group 字段集必须出现在此页面上。这一点很重要，因为“crm-submit-buttons”由其他字段集控制，而该字段集不在此页面上。

     if( $("#payment_options-group").val().length === 1 ) {
     $("div#crm-submit-buttons").show();
     }
else {
$("div#crm-submit-buttons").hide();
}

任何帮助将不胜感激。提前致谢。

Answer 1

您可以检查长度是否为> 0，然后选中复选框并根据此显示或隐藏 div 显示字段集。

演示代码：

console.log($(".payment_options-group").length + "--length of fielset")
console.log($("input[name=payment_processor_id]:checked").length + "--length of chekd")
//check if fieldset is prsent and checked length if > 0
if (($(".payment_options-group").length > 0) && ($("input[name=payment_processor_id]:checked").length > 0)) {
  $("div#crm-submit-buttons").show();
} else {
  $("div#crm-submit-buttons").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="crm-public-form-item crm-group payment_options-group" style="display:block !important; visibility: visible;">
  <div class="crm-public-form-item crm-section payment_processor-section" style="display:block;">
    <div class="content">
      <input class="payment_processor_1 crm-form-radio" value="5" type="radio" id="CIVICRM_QFID_5_payment_processor_id" name="payment_processor_id">
      <input class="payment_processor_2 crm-form-radio" value="3" type="radio" id="CIVICRM_QFID_3_payment_processor_id" name="payment_processor_id" checked>
    </div>
  </div>
</fieldset>

<div id="crm-submit-buttons" class="crm-submit-buttons" style="visibility:visible; display:block;">
  <button class="crm-form-submit default validate crm-button crm-button-type-upload crm-button_qf_Main_upload" value="1" type="submit" name="_qf_Main_upload" id="_qf_Main_upload-bottom">​…</button>
</div>

Answer 2

这是一个带有复选框的演示，可能更容易理解，因为您可以取消选中以看到按钮再次消失：

$(".crm-submit-buttons").hide(); // hides button on load 

$('.crm-form-radio').on('click', function() {
  if ($('.payment_options-group').length > 0 && $('.crm-form-radio:checked').length) {
    $(".crm-submit-buttons").show();
  } else {
    $(".crm-submit-buttons").hide();
  }
})

fieldset{
  width: 200px;
}

button {
  margin-top: 10px;
  border-radius: 4px;
  background: lightblue;
  display: inline-block;
  padding: 5px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="payment_options-group">
  <input class="crm-form-radio" value="5" type="checkbox" name="payment_processor_id">
  <input class="crm-form-radio" value="3" type="checkbox" name="payment_processor_id">
</fieldset>

<div class="crm-submit-buttons"><button>Button</button></div>