1

I want to toggle an input via a checkbox. Here's the code:

css:

.moveaway{ position:absolute;top:-999rem;}

html

<p>
<label><?php _e('Setup Template')?></label>
<input class="check-toggle" name="toggle" type="checkbox" value="1" <?php echo $template ? 'checked="checked' : '';?> />
</p>
<p id="template-input" class="<?php echo $template ? '' : 'moveaway'?>">
<lable for="template-name">Template Name</lable>
<input id="template-name" type="text" name="template-name"  value="<?php echo $tamplate; ?>" />
</p>

javascript:

$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $("p#template-input").attr('class','');
  }else{
    $("p#template-input").attr('class','moveaway');
    $("input#template-name").val(0);
  }
});

The above code works when the template-name input field is empty. When the template-name field value is set, the wrapper p#template-input gets merged in to the p which contains the check-toggle input.

I don't understand how the change function made this. I would like to learn how to get the result that the p#template-input can be toggled by the checkbox.

4

1 に答える 1

1

コードにいくつかの変更を加えましたが、動作します。

デモを見てください。

最初に を に変更しました。位置をブロックからインラインのものに変更することをお勧めしますが、CSS のプロパティを変更して、 または から を使用し続け<p>たり、の中に入れたりすることもできます。<div>pdivp

次に、クラスaddClassについてはandを使用しましたがremoveClass、属性を変更するよりも優れています。

デモで見たように、template-input が機能しました。

以前の私のコメントのように、キャッシュされたメソッド:

var $templateInput = $("div#template-input");
var $templateName = $("input#template-name");
$("input.check-toggle").change(function() {
  if ($(this).is(':checked')) {
    $templateInput.removeClass('moveaway');
  }else{
    $templateInput.addClass('moveaway');
    $templateName.val("0");
  }
});

さらに高速に実行され、結果は同じです。ここでデモを見ることができます。

于 2013-01-31T12:20:52.657 に答える