Отображать строку таблицы, если флажок установлен.

Использование jquery, как я могу отображать/скрывать строку с id="hidden", когда флажок id="post" отмечен или не установлен?Отображать строку таблицы, если флажок установлен.

<tr> 
     <td valign="top"> 
      <p>Contact Method:</p> 
     </td> 
     <td>&nbsp;</td> 
     <td align="left" valign="top"> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" /> 
        <label style="margin-right: 25px;">Phone</label> 
       </p> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" /> 
        <label style="margin-right: 25px;">Email</label> 
       </p> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" /> 
        <label style="margin-right: 25px;">Post</label> 
       </p> 
     </td> 
    </tr> 
    <tr id="hidden">  
     <td> 
     <p>Address (if applicable):</p> 
     </td> 
     <td>&nbsp;</td> 
     <td colspan="2"><input type="text" name="address" id="address" /></td> 
    </tr>

источник

2012-08-14 Rob

компактный способ сделать это с JQuery:

$(document).ready(function() {  
    $("#post").change(function() { 
     $("#hidden").toggle(); 
    }); 
})

Работа демо: JSFiddle.

источник

2012-08-14 13:01:33 Chris

Это то, что я пробовал, но он не отображается и не скрывается, когда флажок установлен. Будет ли факт, что я использую Wordpress, имеет значение? – Rob

@Rob Пожалуйста, взгляните на рабочую демонстрацию, которую я только что добавил. Можете ли вы показать нам исходный код нерабочей версии? – Chris

Попробуйте это:

$(document).ready(function() { 
    $('#post').change(function(){ 
     $('#hidden').css('display', this.checked ? 'block' : 'none') 
    }) 
})

Fiddle

источник

2012-08-14 13:00:25 undefined

Был ли факт, что я использую Wordpress, имеет значение, потому что он не работает. – Rob

@Rob Да, это так, вы уверены, что jQuery загружен правильно? и нет конфликта? Вы помещаете скрипты в обработчик $ (document) .ready()? – undefined

попробовать это один ....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> $("#post").click(function(){ $("#hidden").toggle(); })); </script>

источник

2012-08-14 13:03:36

Попробуйте это:

jQuery(function ($) { 
    $('tr#hidden').hide(); 

    $('input#post').change(function(e) { 
     if($(this).attr('checked')) 
     { 
      $('tr#hidden').show(); 
     } 
     else 
     { 
      $('tr#hidden').hide(); 
     } 
    }); 
});

источник

2012-08-14 13:08:19 MMCACHRAN

Ok Для примера:

<div id="hidden"> 
<p>Some Sample Content</p> 
</div> 

<div id="control"> 
<input type="checkbox" id="check" /> 
<label for="check">Show Element</label> 
</div>

Использование Jquery как это:

$(document).ready(function(){ 
    $('#check').click(function(){ 
     checkIt(); 
    }); 
}); 

function checkIt(){ 
    if ($('#check:checked').val() == "on"){ 
     $('#hidden').css({'display':'block'}); 
    } else { 
     $('#hidden').css({'display':'none'}); 
    } 
}

Также приведен рабочий пример: http://jsfiddle.net/dbs3r/

источник

2012-08-14 13:13:43 Amyth

Отображать строку таблицы, если флажок установлен.

ответ

Смежные вопросы