显示/隐藏div输入无线电

时间:2016-01-18 09:15:15

标签: javascript jquery html

我需要在选择特定值时显示/隐藏div但我认为JavaScript选择器'或'不起作用。但它只在一个条件下工作。我检查了文档,但没有任何帮助我

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

2 个答案:

答案 0 :(得分:4)

"//div[@class='infor-collapsed-icon-img']/img[contains(@title, 'Print Manager')]"

没有做你认为它正在做的事情。这只是检查值等于if(this.value == 'LE' || 'CRL' || 'EXT') 。 OR运算符短路以获得第一个truthy值。由于任何非空字符串都是真实的,LE表达式将被评估为this.value == 'LE' || 'CRL' || 'EXT'

使用

this.value == 'LE'

或者创建一个数组并检查该元素是否存在于数组中。

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

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

答案 1 :(得分:1)

您对||的使用是错误的。您的if条件应该如下。

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