3

Core Admin http://wrapbootstrap.com/preview/WB0135486という名前のブートストラップ テーマを使用しています。

これは私が書いたコードです：

<div class="span6">
    <input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
    <label for="icheck1">Needed</label>
</div>

そしてブートストラップは私にこのコードを生成します:

<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
    <input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
    <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>

結果は次のとおりです。ここに画像の説明を入力

基本的に、それは私にとってかなりのチェックボックスになります。チェックボックスをクリックするたびに、checkedクラスが div に追加されます。

 <div class="icheckbox_flat-aero checked" style="position: relative;">

だから最初は、このように入力フィールドが変更されているのを聞きたかった

$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
    if (this.checked) {

    }
});

ただし、実際には入力フィールドは変更されませんが、<div>要素のクラスが変更されます。

チェックボックスがチェックされているのを聞くにはどうすればよいですか?

4

10 に答える 10

10 
$('input#Checkbox1').change(function () {
    if ($('input#Checkbox1').is(':checked')) {
        $('input#Checkbox1').addClass('checked');
    } else {
        $('input#Checkbox1').removeClass('checked');
    }
});

私はその方法で解決します。

于 2013-07-30T14:10:24.833 に答える
3

テンプレートは、コールバックを持つhttps://github.com/fronteed/iCheck/を使用しているようです。

$('input[type="checkbox"][name="userAccessNeeded"]').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

または、次のものもあります。

$('input[type="checkbox"][name="userAccessNeeded"]').iCheck('check', function(){
  alert('Well done, Sir');
});

これは、さまざまな方法で機能するはずです。

// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');
于 2013-09-16T18:36:38.497 に答える
2

div要素をクリックしているので、最後にこのように解決しました。そのクリックイベントをリッスンし、divにクラスがあるかどうか、チェックボックスのIDが何であるかを確認する必要があります。

 $('.iCheck-helper').click(function () {
    var parent = $(this).parent().get(0);
    var checkboxId = parent .getElementsByTagName('input')[0].id;
    alert(checkboxId);
});
于 2013-07-31T08:56:04.093 に答える
1

@Srihariは、セレクターを除いて正しく理解しました。確かにinput変更されていませんonclickが、divdo：

$('.icheckbox_flat-aero').click(function(){
    $(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});
于 2013-07-31T07:55:48.057 に答える
1

あなたの質問を見て、過去1年間ブートストラップで作業していると、追加されているチェックされたクラスはブートストラップによって行われていないと断言できます。追加されるチェック済みクラスも、BS 2.3.* に組み込まれているプロパティではありません。

ただし、特定の質問については、次のコードを試してください。

$('.icheck').click(function(){
    $(this).toggleClass('checked');
});

ここで実際の例を入手できます。

更新 1: CSS を使用してチェックボックスを色でスタイル設定することはできません。したがって、開発者は挿入タグを使用してチェックボックスを削除し、スタイリング コードを挿入しています。実際には、指定されたテーマの CSS と JS は、新しい様式化されたコードを挿入することによってスタイリングを行います。

代わりに、 div のクリック イベントにリストできますicheckbox_flat-aero。

$('.icheckbox_flat-aero').children().on('click',function(){
   alert('checked');
});

例を確認してくださいhttp://jsfiddle.net/hunkyhari/CVJhe/1/

于 2013-07-30T14:30:23.243 に答える