顯示/隱藏表單元素的JQuery代碼

我有一個填充了3行復選框的表單。我只想在第二行只有第三個複選框被選中的情況下才可用。截至目前，我得到的所有三行都顯示，所以很可能我沒有正確調用JQuery。顯示/隱藏表單元素的JQuery代碼

此外，如果表單自動縮放以解決隱藏/顯示時丟失/增加的行，那將會很不錯。這是否會自動發生（我使用Bootstrap如果有所作爲）。

下面是代碼：

JQuery的

<body> 
    <script> 
    $(function showHide() { 
     $("name=checkboxes").click(function() { 
      if (($('.checkboxes-farms').prop('checked', true)) || $('.checkboxes-fields').prop('checked', true) || $('.checkboxes-cropzones').prop('checked', false)) { 
       $('#group2').hide(); 
       $('#group3').hide(); 
      } 
     }); 
    }); 
    </script> 
</body>

HTML

 <form class="form-horizontal"> 
     <fieldset> 
      <!-- Form Name --> 
      <legend>Select Entities to Search For</legend> 
      <!-- Multiple Checkboxes (inline) --> 
      <div class="form-group" id="group1"> 
      <label class="col-md-4 control-label" for="checkboxes">Table(s)</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxes-0"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-farms" value="1"> 
        Farms 
       </label> 
       <label class="checkbox-inline" for="checkboxes-1"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-fields" value="3"> 
        Fields 
       </label> 
       <label class="checkbox-inline" for="checkboxes-2"> 
       <input type="checkbox" name="checkboxes" id="checkboxes-cropzones" value="5"> 
        Cropzones 
       </label> 
      </div> 
      </div> 
      <!-- Multiple Radios (inline) --> 
      <div class="form-group" id="group2"> 
      <label class="col-md-4 control-label" for="checkboxes">Cropyear</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxess-0"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-cropyear" value="2014"> 
        2014 
       </label> 
      </div> 
      </div> 
      <!-- Multiple Checkboxes (inline) --> 
      <div class="form-group" id="group3"> 
      <label class="col-md-4 control-label" for="checkboxes">Crop</label> 
      <div class="col-md-4"> 
       <label class="checkbox-inline" for="checkboxes-0"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-corn" value="100"> 
        Corn 
       </label> 
       <label class="checkbox-inline" for="checkboxes-1"> 
       <input type="checkbox" name="checkboxes-lower" id="checkboxes-soybeans" value="200"> 
        Soybeans 
       </label> 
      </div> 
      </div> 
     </fieldset> 
     </form>

來源

2013-11-22 Alex Chumbley

你能不能讓http://jsbin.com演示？ – SaidbakR

函數showHide（）..你有nt叫這個函數的任何地方 – Bhadra

$（「name = checkboxes」）whatttt ??????????? ：D –

$(function() { 
    $('[name="checkboxes"]').on('change', function() { 
     var others_checked = $('#checkboxes-fields, #checkboxes-farms').is(':checked'); 
     $('#group2, #group3').toggle($('#checkboxes-cropzones').is(':checked') && !(others_checked)); 
    }).trigger('change'); 
});

FIDDLE

來源

2013-11-22 17:55:11 adeneo

對不起，如果它不是更清楚，但第二個兩行不應該可用，如果第三個複選框和任何其他兩個檢查 –

@AlexChumbley - 那麼我想我將不得不編輯它！ – adeneo

精彩編輯！ –

-1

你需要首先隱藏 - 在jQuery的文件準備功能，建議做此例如：

$(document).ready(function() { 
// Stuff to do as soon as the DOM is ready; 
});

而且我會將「更改」事件附加到控制顯示其他字段的複選框。

讓我知道你是否需要在jsfiddle或類似的地方彈出一個例子。

來源

2013-11-22 17:50:54 steve

嘗試：

$(document).ready(function(){ 
    $("input[name='checkboxes']").change(function() { 
     if (($('#checkboxes-farms').prop('checked') == false) && ($('#checkboxes-fields').prop('checked') == false) && ($('#checkboxes-cropzones').prop('checked') == true)) { 
      $('#group2,#group3').show(); 
     } else { 
      $('#group2,#group3').hide(); 
     } 
    }); 
});

Fiddle here.

來源

2013-11-22 17:56:31 Hiral

在小提琴中很好用，但不在html本身，我只是通過在''標籤中粘貼您的答案來錯誤地調用該函數？順便說一句，+1 –

謝謝:)寫在'ready'函數下。像'$（document）.ready（function（）{$（「input [name ='checkboxes']」）。change ........}）;'' – Hiral

顯示/隱藏表單元素的JQuery代碼

回答

相關問題