是否可以在单击标签时不触发复选框?

Is it possible to don't trigger checkbox when clicked on its label?

本文关键字：复选框 标签 单击 是否      更新时间：2023-09-26

基本上我不想做的是使jQuery功能，当它点击复选框的名称，我有提示窗口来改变复选框的名称，但它是自动选中/取消选中复选框本身。我需要的是，是否有可能不触发复选框时，点击其标签?

p。S希望我写的很清楚:)

我的标记是:

<div class="checkbox">
  <input id="check1" type="checkbox" name="check">
  <label for="check1">Checklist One</label>
  <br>
  <input id="check2" type="checkbox" name="check" checked>
  <label for="check2">Checklist two</label>
  <br>
  <input id="check3" type="checkbox" name="check">
  <label for="check3">Checklist 3</label>
</div> <!-- END OF CHECKBOX -->

从标签

移除for属性
<div class="checkbox">
    <input id="check1" type="checkbox" name="check">
    <label>Checklist One</label>
    <br>
    <input id="check2" type="checkbox" name="check" checked>
    <label>Checklist two</label>
    <br>
    <input id="check3" type="checkbox" name="check">
    <label>Checklist 3</label>
</div>

你可以这样解决:

$('label').on('click', function(e){
  e.preventDefault();
  
  // here you can add your code to handle the rename
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="checkbox">
  <input id="check1" type="checkbox" name="check">
  <label for="check1">Checklist One</label>
  <br>
  <input id="check2" type="checkbox" name="check" checked>
  <label for="check2">Checklist two</label>
  <br>
  <input id="check3" type="checkbox" name="check">
  <label for="check3">Checklist 3</label>
</div>
</body>
</html>

一种可能的方法是:

// binding the anonymous function of the on() method
// as the 'click' event-handler, passing the event to
// that anonymous function:
$('label').on('click', function (e) {
  // preventing the default action of the
  // <label> element:
  e.preventDefault();
  // selecting the appropriate <input> element using
  // the htmlFor property of the <label>:      
  $('#' + this.htmlFor)
    // updating the name property (not the attribute)
    // of the <input> using the anonymous function of
    // of the prop() method:
    .prop('name', function(i,oldName) {
      // i: the first argument, the index of the
      // current element in the collection,
      // oldName: the current value of the property
      // we're working with.
    // presenting a prompt to the user, informing them of the
    // current name, and asking if they wish to change it;
    // if they should enter a new name that new name is returned
    // to the variable, otherwise if they click cancel null
    // is returned:
    var newName = prompt("Do you want to change the name from " + oldName + '?');
    // here we check for a newName existing (so a new name was entered)
    // if it was we return that newName, otherwise we return the oldName:
    return newName ? newName : oldName;
  });
});


$('label').on('click', function(e) {
  e.preventDefault();
  $('#' + this.htmlFor).prop('name', function(i, oldName) {
    var newName = prompt("Do you want to change the name from " + oldName + '?');
    return newName ? newName : oldName;
  });
});
label::after {
  content: '';
  display: block;
  height: 0.5em;
  width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <input id="check1" type="checkbox" name="check">
  <label for="check1">Checklist One</label>
  <input id="check2" type="checkbox" name="check" checked>
  <label for="check2">Checklist two</label>
  <input id="check3" type="checkbox" name="check">
  <label for="check3">Checklist 3</label>
</div>

当然，如果没有jQuery使用原生DOM，这是可能的:

// using a named function to handle the functionality,
// passing in the relevant element, the event and
// name of the property to change:
function updateProperty(el, event, property) {
  // cancelling the default behaviour:
  event.preventDefault();
  // finding the relevant <input> element using
  // the <label> element's htmlFor property:
  var input = document.getElementById(el.htmlFor),
    // retrieving the current property-value:
    oldVal = input[property],
    // asking the user if they want to update the
    // relevant property from the existing value:
    newVal = prompt("Do you want to update the " + property + " from '" + oldVal + "'?");
  // if they enter a new value that wil be stored as
  // as a String in the newVal variable and will
  // return a truthy result, and will set the
  // relevant property to the newVal, otherwise if
  // no new value was entered the newVal will 
  // evaluate to false, and the oldVal will be set as
  // the property-value:
  input[property] = newVal ? newVal : oldVal;
}
// converting the result of document.querySelectorAll() into
// an Array, using Array.from(), and iterating over that Array
// with Array.prototype.forEach():
Array.from(document.querySelectorAll('label')).forEach(function(label) {
  // 'label' the first (only) argument is a reference to the
  // Array-element of the Array over which we're iterating.
  // binding the anonymous functiona s the 'click'
  // event-handler:
  label.addEventListener('click', function(e) {
    // 'e' is the event object.
    // here we call the function, and pass
    // arguments to that function:
    // 'this' : the <label> element that
    // received/initiated the event,
    // 'e' : the event itself,
    // 'name' : the property we wish to
    // update within the called function.
    updateProperty(this, e, 'name');
  });
});


function updateProperty(el, event, property) {
  event.preventDefault();
  var input = document.getElementById(el.htmlFor),
    oldVal = input[property],
    newVal = prompt("Do you want to update the " + property + " from '" + oldVal + "'?");
  input[property] = newVal ? newVal : oldVal;
}
Array.from(document.querySelectorAll('label')).forEach(function(label) {
  label.addEventListener('click', function(e) {
    updateProperty(this, e, 'name');
  });
});
label::after {
  content: '';
  display: block;
  height: 0.5em;
  width: 0;
}
<div class="checkbox">
  <input id="check1" type="checkbox" name="check">
  <label for="check1">Checklist One</label>
  <input id="check2" type="checkbox" name="check" checked>
  <label for="check2">Checklist two</label>
  <input id="check3" type="checkbox" name="check">
  <label for="check3">Checklist 3</label>
</div>

引用:

  • JavaScript:
    • Array.from() .
    • Array.prototype.forEach() .
    • 条件(三元)运算符。
    • document.getElementById() .
    • document.querySelectorAll() .
    • Event.preventDefault() .
    • EventTarget.addEventListener() .
    • HTMLLabelElement .
    • prompt() .
  • jQuery:
    • on() .
    • prop() .
相关文章：