显示/隐藏div输入广播

Question

I need to show/hide a div when a specific value is selected but I think the JavaScript selector 'or' doesn't not working. But its working when there is only one condition. I checked the documentation but nothing helped me

<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-bordered" style="width: auto !important;">
            <tbody class="table-striped">
                <tr>
                    <td rowspan="4" style="vertical-align: middle;">Le salarié a-t-il un projet professionnel ?</td>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="choixPP" id="choixPP" value="LE"> à Limousin Expansion
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="choixPP" id="choixPP" value="CRL"> au Conseil Régional du Limousin
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="choixPP" id="choixPP" value="EXT"> a l'extérieur
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="choixPP" id="choixPP" value="0" checked> pas de projet professionnel
                        </label>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="form-group" id="divChoixPP" style="display:none;">
        <label for="divChoixPP" class="col-sm-2 control-label">Si oui, préciser le projet</label>
        <div class="col-sm-6">
            <textarea class="form-control" name="divChoixPP" id="divChoixPP" rows="6" cols="20"></textarea>
        </div>
        <!-- .col-sm-6 -->
    </div>
    <!-- .form-group -->
</div>

JavaScript:

$(document).ready(function () {
    $("#divChoixPP").hide();

    $("input:radio[name='choixPP']").change(function () {

        if (this.value == 'LE' || 'CRL' || 'EXT' && this.checked) {
            $("#divChoixPP").show();
        } else {
            $("#divChoixPP").hide();
        }
    });
});

Answer 1

if(this.value == 'LE' || 'CRL' || 'EXT')

is not doing what you think it is doing. This is just checking the value equals to LE . The OR operator is short-circuit to get the first truthy value. As any non-empty string is truthy, this.value == 'LE' || 'CRL' || 'EXT' this.value == 'LE' || 'CRL' || 'EXT' this.value == 'LE' || 'CRL' || 'EXT' expression is evaluated to this.value == 'LE'

Use

if(this.value === 'LE' || this.value === 'CRL' || this.value ==='EXT'

Or create an array and check if the element is present in the array.

var values = ['LE', 'CRL', 'EXT'];

if (values.indexOf(this.value) !== -1)

---

 $(document).ready(function() { var values = ['LE', 'CRL', 'EXT']; $("input:radio[name='choixPP']").change(function() { $('#divChoixPP').toggle(this.checked && values.indexOf(this.value) !== -1) }); }); 

 #divChoixPP { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="panel-body"> <div class="table-responsive"> <table class="table table-bordered" style="width: auto !important;"> <tbody class="table-striped"> <tr> <td rowspan="4" style="vertical-align: middle;">Le salarié at-il un projet professionnel ?</td> <td> <label class="radio-inline"> <input type="radio" name="choixPP" id="choixPP" value="LE">à Limousin Expansion </label> </td> </tr> <tr> <td> <label class="radio-inline"> <input type="radio" name="choixPP" id="choixPP" value="CRL">au Conseil Régional du Limousin </label> </td> </tr> <tr> <td> <label class="radio-inline"> <input type="radio" name="choixPP" id="choixPP" value="EXT">a l'extérieur </label> </td> </tr> <tr> <td> <label class="radio-inline"> <input type="radio" name="choixPP" id="choixPP" value="0" checked>pas de projet professionnel </label> </td> </tr> </tbody> </table> </div> <div class="form-group" id="divChoixPP" style="display:none;"> <label for="divChoixPP" class="col-sm-2 control-label">Si oui, préciser le projet</label> <div class="col-sm-6"> <textarea class="form-control" name="divChoixPP" id="divChoixPP" rows="6" cols="20"></textarea> </div> <!-- .col-sm-6 --> </div> <!-- .form-group --> </div> 

Answer 2

Your usages of || is wrong. Your if condition should be like following.

if(this.value == 'LE' || this.value=='CRL' || this.value=='EXT' && this.checked){
    //do your task here
}