复选框作为带有prop()的单选按钮

时间:2015-11-06 03:44:06

标签: jquery

我有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); }); 。问题在哪里?

2 个答案:

答案 0 :(得分:1)

  

问题出在哪里?

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

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

后添加.closest()

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

您正在通过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