JavaScript有條件的隱藏/顯示問題

Question

我需要一些JavaScript邏輯的幫助。 我有隱藏/顯示此代碼。 如果滿足或條件中的任何一個條件，則需要它工作。 目前，它適用於前兩個條件。 我對javascript很陌生，因此不確定我是否正確編寫了條件。

javascript：

$("input[name=JECT]").click(function() {
        if ((this.value == "no" || this.value == "JECTindividual_electronic") || document.getElementById("JECTRenewal")== "yes")
           $('#JECTvolumeshow').slideUp();
         else $('#JECTvolumeshow').slideDown();
    });

這是HTML：

<h2>Subscription Options</h2>
<h3>Please choose the options you desire.</h3>

    <div id="JECTshow" style="display:none">
    <p style="text-indent:30px;">Length of subscription:</br>
            <label><input type="radio" name="JECTsub" value="1" checked <?php if(@$JECTsub=="1"){ echo "checked";}?>> 1 year</label></br>
            <label><input type="radio" name="JECTsub" value="2" <?php if(@$JECTsub=="2"){ echo "checked";}?>> 2 years</label></br>
            <label><input type="radio" name="JECTsub" value="3" <?php if(@$JECTsub=="3"){ echo "checked";}?>> 3 years</label></br>
            <label><input type='checkbox' name='JECTrenewal' value='yes' <?php if(@$JECTrenewal=="yes"){ echo "checked";}?>> Check box if this is a renewal</label></p></br>
            <div id="JECTvolumeshow" style="display:none">
            <p style="text-indent:30px;">I would like my subscription to start with:</br></p>
            <label><input type="radio" name="JECTvolume" value="current" checked<?php if(@$JECTvolume=="current"){ echo "checked";}?>><?php echo "Volume ".$JECTsubscribeVolume['vol'].", Year ".$JECTsubscribeVolume['year']?></label></br>
            <label><input type="radio" name="JECTvolume" value="next"<?php if(@$JECTvolume=="next"){ echo "checked";}?>><?php echo "Volume ".++$JECTsubscribeVolume['vol'].", Year ".++$JECTsubscribeVolume['year']?></label></p>
           </div>
    </div>

Answer 1

document.getElementById("JECTRenewal")返回DOM節點，而不是元素的任何單個屬性。 因此，您不會直接將它與"yes"進行比較。 要查看是否已選中此復選框，請將JECTrenewal設置為元素的ID，然后查找checked屬性：

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || document.getElementById("JECTrenewal").checked)
 ...

或者，使用jQuery：

if ((this.value == "no" || this.value == "JECTindividual_electronic") 
    || $("input[name=JECTrenewal]").is(":checked"))
 ...

Answer 2

當將不在DOM中的id用作參數時，document.getElementById將返回null。 那么下面的代碼是您想要的嗎？

 $("input[name=JECT]").click(function() { if (this.value == "no" || this.value == "JECTindividual_electronic" || document.getElementById("JECTRenewal") !== null) $('#JECTvolumeshow').slideUp(); else $('#JECTvolumeshow').slideDown(); }); 

如果您想比較該元素的文本內容，那么使用jquery可能是最簡單的方法，如下所示：

 $("input[name=JECT]").click(function() { if (this.value == "no" || this.value == "JECTindividual_electronic") || $("#JECTRenewal").text() == "yes") $('#JECTvolumeshow').slideUp(); else $('#JECTvolumeshow').slideDown(); }); 

Answer 3

使用jquery時，必須以jquery fashion ex選擇“ this” 。 $（this） ; 您還必須使用.val（）而不是value 。

例子

  $("input[name=JECT]").click(function() {

            if ( $(this).val() == "no" || $(this).val() == "JECTindividual_electronic" || $("#JECTRenewal").text() == "yes"){

               $('#JECTvolumeshow').slideUp();

            } else {

               $('#JECTvolumeshow').slideDown();

            }


        });

僅供參考，我在此代碼中也糾正了其他一些小問題...

希望這可以幫助 。