Question

我有3个列表（ul），里面有复选框。如果我检查一个并且要检查另一个，则必须取消选中之前检查的那个（一个列表中的复选框不应该影响另一个列表中的另一个）：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="bz.bdu.alarmtest" >

    <uses-permission android:name="android.permission.WAKE_LOCK" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".SetAlarmActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <receiver android:name=".AlarmReceiver" />
    </application>

</manifest>

这是JQuery代码：

<!--printed from php -->
<div id="checkboxes">
    <ul>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
    <ul>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
    <ul>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
        <li><input type="checkbox" /></li>
    </ul>
</div>

警报正在运行，但不是$(document).on('change', '#checkboxes li input[type=checkbox]', function() { $(this).closest('ul').not(this).prop('checked', false); //alert(this); });。问题在哪里？

Answer 1

问题出在哪里？

未选择input之后的.closest("ul")元素来设置checked元素的input属性，而不是ul父元素？

尝试在致电.find("input")

后添加.closest()

＆＃13;

$(document).on('change', '#checkboxes li input[type=checkbox]', function() {
  $(this).closest('ul').find("input").not(this).prop('checked', false);
  //alert(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkboxes">
  <ul>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
    <li>
      <input type="checkbox" />
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您正在通过ul的选择器找到最接近的元素，并立即使用不期望工作的.not()。原因是，现在点击的元素是checkbox本身，而不是ul元素。使用.find()，然后使用.not()进行链接。无论如何尝试这段代码：

// can simplified selector like
// $(document).on('change', '#checkboxes :checkbox',
$(document).on('change', '#checkboxes li :checkbox', function() {
   $(this).closest('ul').find(':checkbox').not(this).prop('checked', false); 
});

DEMO

复选框作为带有prop（）的单选按钮

2 个答案: