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();
}
});
});
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 <!-- .col-sm-6 -->\r\n </div>\r\n <!-- .form-group -->\r\n</div>",
2016-01-18T09:16:32