Question

我有一个复选框和颜色选择器列表，其中包含一些与之关联的文本。在我添加颜色选择器之前，当我点击旁边的文本时我能够检查一个复选框（我不知道如何）。
现在，当我点击文本时，它会触发颜色选择器我想了解是什么导致了这种行为以及如何改变它。

Html：

<br><div id="cb">
        <ul class="list">
        <li class="list__item">
          <label class="label--checkbox">
              <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="1">
                Buffer overflow
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
              <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="62,63">
                Diffusion enabled/disabled
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
                <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="8,9,10,11">
                Diffusion programs edit
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
                <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="64,65,66,67">
                Diffusion programs suppress
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
                 <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="50,54">
                Diffusion start/stop
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
                <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="68,69">
                Empty Reserve 1/2
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="76">
                Flow rate alarm
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="21,22,23">
                GSM module events
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="16,17">
                Input pressure over/underflow
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="18,19">
                Output pressure over/underflow
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="200,201">
                Polling events
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="4,5">
                Power back/Power failure
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="26,27">
                Reserves pressure check
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="70,71">
                Reserves refill
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="59">
                Reserve switch
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR" >
              <input type="checkbox" class="checkbox" value="30">
                Setup parameter change
          </label>
        </li>
        <li class="list__item">
          <label class="label--checkbox">
          <input type="color" id="CLR">
              <input type="checkbox" class="checkbox" value="28,29">
                UPC mode adjust/check
          </label>
        </li>
      </ul>
    </div>

CSS：

body {
  font-size: 16px;
}

.header {
  height: 8rem;
  background: #009688;
}

.content {
  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 0.125rem;
  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
}

#CLR {
  border-radius: 100%;
  height: 25px;
  width: 25px;
  border: none;
  outline: none;
}
#CLR::-webkit-color-swatch-wrapper {
  padding: 0;   
}
#CLR::-webkit-color-swatch {
  border: none;
  border-radius: 100%;
}


.list {
  margin: .5rem;
  list-style-type: none;
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
  list-style-type: none;
  display: block;
  width: 25%;
  float: left;
}

.label--checkbox {
  position: relative;
  margin: .5rem;
  font-family: Arial, sans-serif;
  line-height: 135%;
  cursor: pointer;
}

.checkbox {
  position: relative;
  top: -0.375rem;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
.checkbox:before {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #c1c1c1;
}
.checkbox:checked:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #009688;
  border-top-style: none;
  border-right-style: none;
}
.checkbox:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  cursor: pointer;
}

.button--round {
  -webkit-transition: 0.3s background ease-in-out;
  -moz-transition: 0.3s background ease-in-out;
  transition: 0.3s background ease-in-out;
  width: 2rem;
  height: 2rem;
  background: #5677fc;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.button--round i {
  font-size: 1rem;
  line-height: 220%;
  vertical-align: middle;
}
.button--round:hover {
  background: #3b50ce;
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

.content {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(6.25rem);
    transform: translateY(6.25rem);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(6.25rem);
    transform: translateY(6.25rem);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

注意：我不想更改颜色选择器和复选框之间的顺序。

SQL Fiddle

Answer 1

＆＃13;

body {
  font-size: 16px;
}

.header {
  height: 8rem;
  background: #009688;
}

.content {
  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;
  background: #fff;
  border-radius: 0.125rem;
  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
}

#CLR {
  border-radius: 100%;
  height: 25px;
  width: 25px;
  border: none;
  outline: none;
}
#CLR::-webkit-color-swatch-wrapper {
  padding: 0;	
}
#CLR::-webkit-color-swatch {
  border: none;
  border-radius: 100%;
}


.list {
  margin: .5rem;
  list-style-type: none;
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
  list-style-type: none;
  display: block;
  width: 25%;
  float: left;
}

.label--checkbox {
  position: relative;
  margin: .5rem;
  font-family: Arial, sans-serif;
  line-height: 135%;
  cursor: pointer;
}

.checkbox {
  position: relative;
  top: -0.375rem;
  margin: 0 1rem 0 0;
  cursor: pointer;
}
.checkbox:before {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
  position: absolute;
  left: 0;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #c1c1c1;
}
.checkbox:checked:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #009688;
  border-top-style: none;
  border-right-style: none;
}
.checkbox:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  cursor: pointer;
}

.button--round {
  -webkit-transition: 0.3s background ease-in-out;
  -moz-transition: 0.3s background ease-in-out;
  transition: 0.3s background ease-in-out;
  width: 2rem;
  height: 2rem;
  background: #5677fc;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.button--round i {
  font-size: 1rem;
  line-height: 220%;
  vertical-align: middle;
}
.button--round:hover {
  background: #3b50ce;
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

.content {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(6.25rem);
    transform: translateY(6.25rem);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(6.25rem);
    transform: translateY(6.25rem);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

＆＃13;

<br><div id="cb">
        <ul class="list">
        <li class="list__item">
          
              <input type="color" id="CLR">
          <label class="label--checkbox">
              <input type="checkbox" class="checkbox" value="1">
                Buffer overflow
          </label>
        </li>
        <li class="list__item">
          
              <input type="color" id="CLR">
          <label class="label--checkbox">
              <input type="checkbox" class="checkbox" value="62,63">
                Diffusion enabled/disabled
          </label>
        </li>
       
      </ul>
    </div>

＆＃13;

只需在颜色选择器后更改标签的位置

<li class="list__item">
  <input type="color" id="CLR">
  <label class="label--checkbox">
     <input type="checkbox" class="checkbox" value="28,29">
     UPC mode adjust/check
   </label>
</li>

Answer 2

您的问题是您声明ArrayAdapter的方式

而不是这样：

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
    R.layout.list_item, R.id.single_item, listContent);

使用它：

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_multiple_choice, listContent);

编辑：

对于自定义适配器行为，您必须制作自己的适配器。

然后，您可以为复选框添加onCheckedChangedListener，为项目点击添加onClickListener。

使用复选框更改列表中的单击行为

2 个答案: