web-dev-qa-db-ja.com

ラジオボックス、チェックされた値を取得[iCheck]

基本的なラジオボックス

<div class="adv_filter">
    <li>
        <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
    </li>
        <li>
            <input type="radio" name="letter_type" data-custom="Text" value="0"> Text</li>
    </li>
</div>

iCheck変換

<!-- iCheck output format
<div class="adv_filter">
    <li>
        <div class="iradio_square-orange checked" aria-checked="true" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li>

        <li>
            <div class="iradio_square-orange" aria-checked="false" aria-disabled="false" style="position: relative;"><input type="radio" name="letter_type" data-custom="Text" value="0" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> Text</li>

</div> -->

ご覧のように、チェックがdivに添付されています。

    $(document).ready(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-orange',
            radioClass: 'iradio_square-orange',
            increaseArea: '20%' // optional
        });
        $("li").on("click", "input", function () {
            var val = $(this).val();
            //updateDataGrid(val);
            alert(val);
        });

    });

質問と説明

提供されたJavaScriptコードは、icheckプラグインを追加する前に適切に機能しました私は、icheckプラグインで同じ結果を得る方法を考えています。そのシンプルなラジオクリックで、後で関数に渡される値を変数に格納します。

ライブの例： http://jsfiddle.net/9ypwjvt4/

iCheck： http://fronteed.com/iCheck/

jqueryicheck
12
Kavvson

ハンドラーをifChangedイベントにアタッチします。

$('input').on('ifChecked', function(event){
  alert($(this).val()); // alert value
});

変更をリッスンする11の方法 ：

  • ifClicked-ユーザーがカスタマイズされた入力または割り当てられたラベルをクリックした
  • ifChanged-入力のチェック、無効、または不確定状態が変更されました
  • ifChecked-入力の状態がチェック済みに変更されます
  • ifUnchecked-チェック状態が削除されました
  • ifToggled-入力のチェック状態が変更されました
  • ifDisabled-入力の状態が無効に変更されます
  • ifEnabled-無効な状態が削除されます
  • ifIndeterminate-入力の状態が不確定に変更されます
  • ifDeterminate-不確定な状態が削除されました
  • ifCreatedinput-カスタマイズされています
  • ifDestroyed-カスタマイズは削除されました

[〜＃〜] jsfiddle [〜＃〜]

21
Ionică Bizău

できるだけjqueryを使用しないでください。以下のコードを使用することもできます。

$('input').on('ifChecked', function(event){
    alert(event.target.value); // alert value
});
6
Abiodun Arowolo

これを使って

// Check #x
$( "#x" ).prop( "checked", true );
 
// Uncheck #x
$( "#x" ).prop( "checked", false );
0
Monzur