Question

我有一个Javascript对象，我想遍历它，然后更改关联的复选框以检查键值是否与输入值匹配。这是我尝试过的：

var object = {
  opt1:"Red Large",
  opt2:"Orange Medium",
  opt3: "Green Small"
};

$.each(object, function (k, v) {
  console.log(v);
  $('input[value="' + v + ']"').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input value="Blue XL" type="checkbox" /> Blue XL</label>
<label><input value="Red Large" type="checkbox" /> Red Large</label>
<label><input value="Orange Medium" type="checkbox" /> Orange Medium</label>
<label><input value="Green Small" type="checkbox" /> Green Small</label>

在此示例中，我希望选中Red，Orange和Green复选框，而Blue保持未选中状态。

Answer 1

您的public class myService extends BroadcastReceiver { @Override public void onReceive(Context context, Intent intent) { showNotif(context, id, name); try { Uri notification = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); Ringtone r = RingtoneManager.getRingtone(context, notification); r.play(); } catch (Exception e) { e.printStackTrace(); } } private void showNotif(Context context, Integer id, String name) { NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(context, id.toString()); notificationBuilder.setAutoCancel(true) .setDefaults(Notification.DEFAULT_ALL) .setWhen(System.currentTimeMillis()) .setSmallIcon(R.drawable.alert) .setTicker("bla") .setPriority(Notification.PRIORITY_MAX) // this is deprecated in API 26 but you can still use for below 26. check below update for 26 API .setContentTitle(name) .setContentText("blabla") .setContentInfo("blablabla"); NotificationManager notificationManager = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE); Intent mIntent = new Intent(context, newClass.class); mIntent .putExtra("ID", id); mIntent .putExtra("NAME", name); PendingIntent mPending = PendingIntent.getActivity(context, id, mIntent , PendingIntent.FLAG_UPDATE_CURRENT); notificationBuilder.setContentIntent(mPending); notificationManager.notify(id, notificationBuilder.build()); } }放在错误的位置。它必须位于"中才能看起来像这样：

这是一个有效的示例：

$('input[value="' + v + '"]')

var object = {
  opt1:"Red Large",
  opt2:"Orange Medium",
  opt3: "Green Small"
};

$.each(object, function (k, v) {
  console.log(v);
  $('input[value="' + v + '"]').prop('checked', true);
});

Answer 2

您还可以在forEach上使用Object.values循环，并为选择器使用模板文字。

var object = {opt1:"Red Large",opt2:"Orange Medium",opt3: "Green Small"};
Object.values(object).forEach(v => $(`input[value="${v}"]`).attr('checked', true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input value="Blue XL" type="checkbox" /> Blue XL</label>
<label><input value="Red Large" type="checkbox" /> Red Large</label>
<label><input value="Orange Medium" type="checkbox" /> Orange Medium</label>
<label><input value="Green Small" type="checkbox" /> Green Small</label>

或者使用普通js。

var object = {opt1:"Red Large",opt2:"Orange Medium",opt3: "Green Small"};
Object.values(object).forEach(v => {
  document.querySelector(`input[value="${v}"]`).checked = true
});

<label><input value="Blue XL" type="checkbox" /> Blue XL</label>
<label><input value="Red Large" type="checkbox" /> Red Large</label>
<label><input value="Orange Medium" type="checkbox" /> Orange Medium</label>
<label><input value="Green Small" type="checkbox" /> Green Small</label>

Answer 3

另一种方法是使对象成为可迭代对象，然后使用for...of进行迭代，并使用document.querySelector设置所需元素的checked属性。

function makeIterable(o) {
  o[Symbol.iterator] = function() {
    var values = Object.values(o);
    return {
      next() {
        var done = values.length === 0;
        var value = values.shift();
        return {
          done,
          value
        }
      }
    }
  }
}
var obj = {
  opt1: "Red Large",
  opt2: "Orange Medium",
  opt3: "Green Small"
};

makeIterable(obj);

for (var val of obj) {
  document.querySelector(`[value='${val}']`).checked = true;
}

<label><input value="Blue XL" type="checkbox" /> Blue XL</label>
<label><input value="Red Large" type="checkbox" /> Red Large</label>
<label><input value="Orange Medium" type="checkbox" /> Orange Medium</label>
<label><input value="Green Small" type="checkbox" /> Green Small</label>

根据Javascript对象将复选框更改为选中

3 个答案: