0

チェックボックスボタンがクリックされたときにラジオボタンを作成する方法は? また、チェックボックスがオフのときにラジオボタンを消去する方法は?

if($("input[type=checkbox]").is(':checked')==true) {
  var val = this.value;
  var dataSplit = val.split("_");
  var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen"
    name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+
    '" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
  $("#result").append(result);
}else if ($("input[type=checkbox]").is(':checked')==false){
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  $('#div'+dataSplit1[0]).parent.remove();
}

チェックボックスをオンにするとコードは機能しますが、チェックボックスをオフにすると機能しません。チェックを外しても、ラジオボタンは追加されたままです。

注意: 2/3 のチェックボックスをオンにして、オフにしてみてください。

4

6 に答える 6

3

おそらく、チェックボックスの変更イベントにバインドして、次のようにする必要があります。

$("input[type=checkbox]").on('change', function() {
    var val = this.value;
    var dataSplit = val.split("_");
    if (this.checked) {
        var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen" name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+'" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
        $("#result").append(result);
    }else{
        $('#div'+dataSplit[0]).remove();
    }
});

フィドル

于 2012-07-26T08:57:40.787 に答える
1

エラー:

  • parent().remove()ではなくparent.remove()、div の代わりに div の親を削除するのはなぜですか?
  • dataSplit1それ以外のdataSplit

一部のブラウザーは、変更イベントが使用されたときにオブジェクトがフォーカスを失うまでイベントをトリガーしないため、変更の代わりにクリックを使用することに注意してください-ただし、adeneoがコメントで指摘したように、クリックをトリガーしないタブ/スペースバートリガーがある場合があります...

OSX上の FX の仮説は、onclick と onchange がスペースバーまたはマウスのいずれかによってトリガーされることを確認しています。

$("input[type=checkbox]").click(function() {
  var val = this.value;
  var dataSplit = val.split("_");
  if (this.checked) {
    var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen"
      name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+
      '" /><label for="'+dataSplit[0]+'" class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
    $("#result").append(result);
  }
  else {
    $('#div'+dataSplit[0]).remove();
  }
});
于 2012-07-26T08:57:11.297 に答える
1

これは非常に簡単です。手順の概要を説明します - Fiddle - Updated

//Get all checkboxes you want to monitor
var myCheckBoxesContainer = $('.checkboxes_container');

//Monitor the change event of these checkboxes
myCheckBoxesContainer.on('change', '.checkboxes', function(){
    var self = $(this), checked = self.is(':checked'), dataSplit = self.val().split('_');

    //code to create radio button
    if(checked){ 
        /* code goes here */ 
        var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen" name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+'" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
        $("#result").append(result);
    }

    //code to delete the radio button
    else{ 
        /* delete code goes here */ 
        $('#div' + dataSplit[0]).remove();
    }
});
于 2012-07-26T09:02:38.227 に答える
0

「elseif」を使用する代わりに、「else」のみを試してください。チェックボックスはオフの場合にのみチェックできます。

if($("input[type=checkbox]").is(':checked')==true) 
{
  var val = this.value;
  var dataSplit = val.split("_");
  var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen"
    name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+
    '" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
  $("#result").append(result);
}
else
{
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  $('#div'+dataSplit[0]).remove();
}
于 2012-07-26T08:55:32.560 に答える
0

is(':checked')ブール値trueまたはを返します。戻り値をまたは：falseと比較する必要はありません。truefalse

if ($("input[type=checkbox]").is(':checked') { // if true
  // ...
} else { // if not true == false
  // ..
}

コードにタイプミスがあることに注意してparentくださいparent()。

于 2012-07-26T08:56:20.050 に答える
0

単純化できると思います：

if($("input[type=checkbox]").is(':checked')==true) {
  var val = this.value;
  var dataSplit = val.split("_");
  var result = '<div id="div'+dataSplit[0]+'"><input type="radio" class="choosen"
    name="rdb_'+val+'" value="'+val+'" id="'+dataSplit[0]+
    '" /><label class="'+dataSplit[0]+'">'+dataSplit[1]+'</label><br /></div>';
  $("#result").append(result);
} else { // Just use else here
  var val1 = this.value;
  var dataSplit1 = val1.split("_");
  // $('#div'+dataSplit1[0]).parent.remove(); should 

  $('#div'+dataSplit1[0]).remove(); 
}
于 2012-07-26T08:53:39.137 に答える