Show/hide div input radio

Ask Time：2016-01-18T17:15:14 Author：Lucas Frugier

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();
        }
    });
});

Author:Lucas Frugier，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/34851002/show-hide-div-input-radio

Tushar :

if(this.value == 'LE' || 'CRL' || 'EXT')\n\n\nis 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' expression is evaluated to this.value == 'LE'\n\nUse\n\nif(this.value === 'LE' || this.value === 'CRL' || this.value ==='EXT'\n\n\nOr create an array and check if the element is present in the array.\n\nvar values = ['LE', 'CRL', 'EXT'];\n\nif (values.indexOf(this.value) !== -1)\n\n\n\n\n\r\n\r\n$(document).ready(function() {\r\n var values = ['LE', 'CRL', 'EXT'];\r\n\r\n $(\"input:radio[name='choixPP']\").change(function() {\r\n $('#divChoixPP').toggle(this.checked && values.indexOf(this.value) !== -1)\r\n });\r\n});\r\n#divChoixPP {\r\n display: block;\r\n}\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"></script>\r\n<div class=\"panel-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table table-bordered\" style=\"width: auto !important;\">\r\n <tbody class=\"table-striped\">\r\n <tr>\r\n <td rowspan=\"4\" style=\"vertical-align: middle;\">Le salarié a-t-il un projet professionnel ?</td>\r\n <td>\r\n <label class=\"radio-inline\">\r\n <input type=\"radio\" name=\"choixPP\" id=\"choixPP\" value=\"LE\">à Limousin Expansion\r\n </label>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <label class=\"radio-inline\">\r\n <input type=\"radio\" name=\"choixPP\" id=\"choixPP\" value=\"CRL\">au Conseil Régional du Limousin\r\n </label>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <label class=\"radio-inline\">\r\n <input type=\"radio\" name=\"choixPP\" id=\"choixPP\" value=\"EXT\">a l'extérieur\r\n </label>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <label class=\"radio-inline\">\r\n <input type=\"radio\" name=\"choixPP\" id=\"choixPP\" value=\"0\" checked>pas de projet professionnel\r\n </label>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <div class=\"form-group\" id=\"divChoixPP\" style=\"display:none;\">\r\n <label for=\"divChoixPP\" class=\"col-sm-2 control-label\">Si oui, préciser le projet</label>\r\n <div class=\"col-sm-6\">\r\n <textarea class=\"form-control\" name=\"divChoixPP\" id=\"divChoixPP\" rows=\"6\" cols=\"20\"></textarea>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>",

2016-01-18T09:16:32

Show/hide div input radio